How To Load Adobe Fonts (Typekit) Faster With JavaScript

As I’ve been looking to improve the performance of my site, one area of concern is loading the custom fonts that I’m using via Adobe Fonts from Adobe Creative Cloud (also known as TypeKit). If you’d like to load fonts, there are quite a few ways:

• Browser-Safe Fonts: By avoiding the use of any custom fonts and, instead, using the default browser-supported fonts, you can dramatically increase the speed of a site. While this may appear to be an option, the overall aesthetics would be horrible. It’s not a realistic option for most companies since you’re limited to Arial, Helvetica, Times New Roman, Georgia, and Courier New.
• Self-Hosting Fonts: You can purchase a license for the fonts and have them loaded on your server. There’s also additional development that can be done so they load faster… but it seems like quite a bit of work.
• Hosted Fonts: Most web designers utilize hosted libraries where you can build a package of fonts and deploy code to reference and display them on your site with a quick code snippet. The two key players in this market are Adobe and Google Fonts. Many CMS platforms incorporate the functionality to include these.

Adobe Fonts

With Adobe Fonts, you select the fonts you wish to display on your site and then build a project with them. One critical aspect here is to only load the fonts that you wish to use throughout your site and no more… the more fonts and styles you select, the slower your site will be.

Note how the Project ID (xxxxxx) is utilized in each of the code examples. If you want to use this code, just be sure to replace the Project ID with your Project ID or else it won’t work. As you can see, the default script provided to load the fonts is:

<link rel="stylesheet" href="https://use.typekit.net/xxxxxx.css">

Unfortunately, Adobe Fonts doesn’t provide a better option for loading your fonts… even though it exists. The following legacy JavaScript code provided Adobe is faster than loading fonts via CSS for a few reasons:

1. The JavaScript code uses asynchronous loading, which means that the browser can continue loading the page while the script is being fetched. In contrast, when you load fonts via CSS, the browser must wait for the CSS file to be downloaded and parsed before it can start loading the fonts. This can result in a delay in font loading and slower page loading times.
2. The JavaScript code uses the Typekit web font loader, which provides additional functionality for loading fonts. For example, the web font loader can detect whether the browser supports the @font-face rule and can avoid loading fonts unnecessarily in browsers that do not support @font-face. It can also provide better font loading performance and improved font rendering.
3. The CSS method requires an additional HTTP request to fetch the CSS file, whereas the JavaScript code is self-contained and does not require any additional files to be fetched. This can result in slightly faster loading times for the JavaScript code.

Overall, using this legacy JavaScript method to load Typekit fonts can result in faster and more reliable font loading than using the CSS method.

<script src="//use.typekit.net/xxxxxxx.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

If you’re running a WordPress site, you can also update your functions.php file to load your Project:

add_action( 'wp_head', 'theme_typekit_inline' );
function theme_typekit() {
	wp_enqueue_script( 'theme_typekit', '//use.typekit.net/xxxxxx.js', '', false);
}
add_action( 'wp_enqueue_scripts', 'theme_typekit' );

function theme_typekit_inline() {
  if ( wp_script_is( 'theme_typekit', 'done' ) ) { ?>
	<script>try{Typekit.load({ async: true });}catch(e){}</script>
  <?php }
}

Every little bit counts when you’re trying to improve your site’s speed. Adobe Fonts isn’t a very fast service, so helping shave off some time with each page load can make a difference!