I recently stumbled upon an easy and elegant way to include web fonts in your project. As we all know, for maximum performance, we need to put our assets — like stylesheets, javascript files and images — on CDN. Along with those assets are custom web fonts and perhaps icon fonts. Unfortunatley custom web fonts via CDN (or any cross-domain font request) don’t work in Firefox or Internet Explorer. They actually require custom CORS configurations to display properly. Here is what I’ve discovered:

Asynchronous web fonts

Most articles I read recently covered the same principles — loading web fonts asynchronously.

They try to:

1. Load web fonts asynchronously
2. Avoid big reflows in layout
3. Load web fonts as fast as possible
4. Avoid loading web fonts for recurring visitors

Let’s get through it roughly:

1. Load web fonts asynchronously

Including web fonts using the CSS @font-face Rule is usually a blocking request, meaning visitors will see invisible text until the custom font has finished loading — which can take a long time with an bad internet connection.

To avoid this, we can put the @font-face into a seperate stylesheet that we load asynchronously via JavaScript. Which you can see in this great article.

2. Avoid big reflows in layout

We now have a reliable system to inject our web font when it’s available. That of course means that initially, users will get the fallback font you’ve defined. While this is a good thing because they can already start reading the text, it means users will get a flash and restyling, often resulting in a jump of words due to the font change.

We can adjust the font-size-adjust and letter-spacing properties to make the fallback font similar to your custom web font.

3. Load webfonts as fast as possible

It’s important to ensure the font is served using a CDN. As I described earlier, we need to properly configure CDN’s CORS settings - as David Walsh learned us.

4. Avoid loading web fonts again for recurring visitors

Because we are asynchronously loading web fonts, we have to avoid that users have to re-download the web fonts over and over again - when it is already available in the cache.

We can achieve this using cookies or the browser’s localStorage - read through this article to implement it correctly.

Embedded Fonts

After I fiddled around with implementing the asynchronous fonts and failing at making the CORS settings work on my CDN I stumbled upon the method of embedding WOFF fonts as an Base64 encoded string.

1. Embedding Fonts
2. Load web fonts asynchronously
3. Avoid big reflows in layout
4. Load web fonts as fast as possible
5. Avoid loading web fonts for recurring visitors

Let’s go through it one more time for fun:

1. Embedding Fonts

To generate a Base64 string from your custom font - type font or icon font - Font Squirrel’s awesome webfont generator got you covered. Before uploading your font, simply select the expert option, then scroll down to the CSS section and select Base64.

Since I am not supporting IE8 anyways - I do not need to include TTF, WOFF2 or EOT fonts and end up with just one Base64 encoded WOFF font string.

2. Load web fonts asynchronously

Embedding the custom font leaves us with the blocking state of the @font-face Rule, but since we are converting the web font into an Base64 encoded string - it gets rid of the browser request for each custom font and you can further minimize the size by gzipping the CSS file.

3. Avoid big reflows in layout

By embedding the Base64 WOFF string inside our CSS file, we make sure the font gets loaded as soon as the CSS is loaded - so we will never experience any reflows.

Another suprisingly nice side-effect of using embedded fonts: When loading custom icon-fonts - it actually waits until the font has been loaded and will not show us hieroglyphs in the meantime!

4. Load webfonts as fast as possible

We don’t need to configure the CORS settings of the CDN, because the CSS file we are including is allowed and our font actually is just a string inside this CSS file.

5. Avoid loading web fonts again for recurring visitors

Our CSS file is cached of course!

Recap

As you can see, we don’t have to hassle around with loading in fonts via JavaScript and making sure that the CDN is configured properly when we use embedded Fonts. Sure we have a few additional miliseconds to wait before the CSS kicks in - but this is only noticeable when we embed too many fonts within our CSS.

If you want to implement a fully automated way to convert your custom fonts using Gulp, take a look at the CSS toolkit cleanSS.