Best way to Use TypeKit

What’s the best way to use TypeKit fonts in Roots themes?

The TypeKit website mentions a number of ways- the standard and advanced.
For example:

The Simple:

<script type="text/javascript" src="//use.typekit.net/xxxxxx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

The Advanced:

<script type="text/javascript">
  (function() {
    var config = {
      kitId: 'xxxxx',
      scriptTimeout: 3000
    };
    var h=document.getElementsByTagName("html")[0];h.className+=" wf-loading";var t=setTimeout(function(){h.className=h.className.replace(/(\s|^)wf-loading(\s|$)/g," ");h.className+=" wf-inactive"},config.scriptTimeout);var tk=document.createElement("script"),d=false;tk.src='//use.typekit.net/'+config.kitId+'.js';tk.type="text/javascript";tk.async="true";tk.onload=tk.onreadystatechange=function(){var a=this.readyState;if(d||a&&a!="complete"&&a!="loaded")return;d=true;clearTimeout(t);try{Typekit.load(config)}catch(b){}};var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(tk,s)
  })();
</script>

The advanced allows the code to be run asynchronously, but it does say “it requires custom CSS to hide the flash of unstyled text”

Am I best using the advanced code? If so, where is the best place to put it? In the footer? Or can I enqueue it?

You’ll need JS in a file to enqueue it. Custom JS can be added to your /assets/js/_main.js file and it will automatically be minified and added into the enqueued scripts.min.js when you run grunt.

Not looked into the _main.js file until now. I’m only tinkering with Grunt at the moment and not using it for my current project. I’ll be using it for the next one.
Are there any tutorials or docs on how to use the _main.js file? It looks really useful- is it just a case of bunging in the JavaScript in each section? It says it loads on body- isn’t this going to slow the page, or is it loaded asynchronously?

However in the case of TypeKit, the docs say that it the “advanced” TypeKit JavaScript code should be put up as high as possible in the <head>. This is to make the loading of the font as quick as possible (otherwise, especially with the custom CSS, the text will be blank). I assume I will need to put the code in a separate file and add it to scripts.js?

You can clear out the _main.js file in this case, since the typekit script will need to run on all pages. The Docs talk a bit about the JS setup, but there’s not much more to know here other than it just concatenates and minifies the _main.js file with the Bootstrap scripts.

If you want to get the most out of the “advanced version”, just drop it into your /templates/head.php file. Other option to get it in the head would be to create and enqueue another js file in the head, but I would only do that if you had other scripts that needed to go in there as well.

Thanks, Chris. I get you. Thinking about it a little more, I think it might be better to add it inline to the head.php as you say. I could also populate the TypeKit kitId via a custom PHP script which might be nice for a theme integration. The only thing is I don’t like inline javascript- it looks messy and gets in the way. Anyway, just to let you know- it is working really well on the site I am working on.

Ok, a clueless about Javascript question here. Historically, I’ve been adding the Typekit’s Simple Version into the head.php file

<script type="text/javascript" src="//use.typekit.net/xxxxxx.js"></script>  
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>  

It works fine. But out of curiosity, if I were to add this into the /assets/js/_main.js file, what would the code actually look like?

I expected to paste the Simple script into where it says // JS here, but that doesn’t work. Clearly I need to modify the Simple javascript somehow. But how?

var ExampleSite = {
  // All pages
  common: {
    init: function() {
      // JS here
    },
    finalize: function() { }
  },

Thanks!

1 Like

I could be wrong, but because you are loading a script from their server, and the following script is only a few characters, you should probably just load it as you have been. The main.js file is mostly for calling your custom javascript or jQuery functions.

<script type="text/javascript" src="//use.typekit.net/xxxxxx.js"></script> 

At a minimum this needs to remain in head.php. Loading a script src is different than running JS code.

There’s no reason you couldn’t put this:

try{Typekit.load();}catch(e){}

In /assets/js/_main.js but you probably don’t want to do that. You need that code to run ASAP after the Typekit script is loaded.

Basically, keep them where they are :slight_smile:

2 Likes

Thanks @swalkinshaw!

Not sure why this popped up in my feed but I have a suggestion for this:

Ps: This was written for v8.0.0 If you want to use it in the current version, alter the NAMESPACE line.

// Typekit
define('TYPEKIT_ID', '123abc');
/**
* Typekit
*/
function typekit() { ?>
  <script type="text/javascript" src="//use.typekit.net/<?= TYPEKIT_ID; ?>.js"></script>
  <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php }
if (TYPEKIT_ID) {
  add_action('wp_head', __NAMESPACE__ . '\\typekit', 1);
}

Here’s a similar approach. We stick these functions in lib/scripts.php. Yes, it just places it in head.php, but it is at least enqueued. You could swap out the simple for the advanced in the second function.

function tend_typekit() {
    if (!is_admin()) {
        wp_enqueue_script( 'tend_typekit', '//use.typekit.net/ruj0wxn.js');
    }
}
add_action( 'wp_enqueue_scripts', 'tend_typekit' );
 
function tend_typekit_inline() {
  if ( wp_script_is( 'tend_typekit', 'done' ) ) { ?>
  	<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<?php } }
add_action( 'wp_head', 'tend_typekit_inline' );
1 Like