How to use web fonts efficiently?

The web fonts allow you to customize your web pages. However, they can lead to some user experience troubles due to performance stakes. We are going to detail the challenges of their use in this post.

The fonts on the web: a steady growth

Between 2012 and 2015, external fonts usage (fonts not available by default in browsers) has increased nearly tenfold:

source: httparchive.org

This is a steady growth, and a web page requires now nearly 3 files on average just for the fonts! A few years ago, their usage was anecdotic.

No doubt that the fonts contribute to improve a websites UI, but they also have a significant cost in terms of web performance.

It’s therefore essential to implement all possible optimizations to avoid slowing down your web pages.

Embed fonts using @font-face

To use a specific font on a web page, the easiest way is to use fonts embedded by default in the browser. To do so, you can use the CSS font-family property. Specify the font you want to use, as well as fallback fonts (in case of unavailability of a font, the browser would attempt to use the next one, etc):

div {
  font-family: "Times New Roman", Times, serif;
}

“Times New Roman” is used if available. Otherwise it will be “Times”, or“”serif”

Here, the main problem is the limitation of available fonts. Only some generic fonts are embedded in the browser (depending on both the system used and the user configuration), which restricts the possibilities.

The emergence of CSS3 has been a turning point for overcoming this deficiency. It has allowed the use of @font-face, which allows the use of custom fonts:

/* déclaration of “myFont” */
@font-face {
   font-family:myFont;
   src: url(myFont.woff), format('woff');
}

/* texts in div should use myFont */
div {
  font-family: myFont, Times, serif;
}

div use myFont if supported. Otherwise it‘ll be “Times”, or “”serif”

Note that the format of the font is specified in the src property: it’s not required, but it prevents the browser to have to determine by itself the format, which is a performance gain.

It remains to find the right font according to your your needs, and ensure it is supported by the largest possible number of browsers!

Finding the right font

Several solutions exist. Today, services such Google Fonts, Font Squirrel or Typekit are offering a large variety of free fonts. So there is a good chance that you will find your happiness thanks to these services.

If that’s not the case, you can create your own font, via tools like Birdfont, FontForge, or fontstruct.

Use the right format for your font

Now that your font has been chosen, the last step is to provide it to all your users, and as soon as possible!
Indeed, using custom fonts immediately raises an accessibility issue: several formats exist, which will lead to more or less heavy files. Unfortunately, the level of support by user agents is heterogeneous, and you will have to manage different cases.

You can check this table to learn more about the support of each format:

WOFF2	the newest and most powerful	support details
WOFF	widely adopted and significant gains over previous	support details
EOT	essential for IE6 and 7	support details
TTF	for Android <4.4	support details
SVG	for Safari iOS<=4.1+	support details

Good news with @font-face: it supports a fallback mechanism, just like font-family! The order is very important to use the most suitable format. The first format encountered and supported by the browser will be used (with one small exception that came from Internet Explorer as we’ll see later).

If you do not need to manage older web browsers, you might settle for use only woff2 and woff as a fallback:

@font-face {
  font-family: myFont;
  // woff2 for newer browsers
  src:  url(myFont.woff2') format('woff2'),    
        // Otherwise, woff format
        url(myFont.woff') format('woff'); 
}

To ensure a much wider compliance, you will be have to deliver the woff2, woff, eot, ttf and svg formats, as shown below:

@font-face {
  font-family: myFont;
  src: url(myFont.eot'); /* IE9 */
       /* IE6-IE8 */
  src: url(myFont.eot?#iefix') format('embedded-opentype'),
       /* woff2 for newer browsers */ 
       url(myFont.woff2') format('woff2'),
       url(myFont.woff') format('woff'),
       /* Safari, Android, iOS */
       url(myFontaFont.ttf')  format('truetype'), 
       /* Legacy iOS */
       url(myFont.svg#svgFontName') format('svg'); 
}

example from CSS-Tricks : Using @font-face

Note that the EOT format is the first used! This goes against what we explained above (the first format defined and supported by the browser should be the used one).

This is related to a bug in Internet Explorer making it required… at least if you want to support older versions.

So you’ll just have to adapt these examples to your needs :)

However, loading fonts via @font-face is not the best approach today. The text can be displayed initially with a default style, before using the wanted style. Many advanced tips have emerged to overcome this problem, and it will be the subject of a new article coming soon on this blog!

Note that you can test if your pages use efficiently font formats, thanks to automated best practices on www.dareboost.com!