Responsive Web Design, Part 2 (2015)

Web Fonts Performance

BY BRAM STEIN

The rapid adoption of web fonts has enriched typographic diversity on the web but also created a new and major bottleneck in terms of performance. Browsers that block rendering while downloading web fonts add a significant and unnecessary delay to displaying a webpage even though the DOM and CSSOM may already be available. Users should be presented with readable text as soon as possible instead of having to stare at a blank or partially rendered page while fonts are downloading.

The only way to make content accessible as soon as possible is by treating web fonts as a progressive enhancement. This doesn’t mean web font performance is not an issue. You still need to load web fonts as quickly as possible so that users experience your site exactly how you designed and built it.

Let’s fix this. But before we can, it is important to understand web fonts: the formats, how browsers load them, and which existing and new CSS features are useful to control font loading and rendering. We’ll then move on to basic and advanced font optimization techniques that will help you make the right trade-off between performance, usability and design.

Web Fonts And Formats

What exactly is a web font? A web font is nothing more than a font downloaded from a web server instead of one read from the local file system. The CSS @font-face rule lets you define and use custom fonts on your site. You’re probably familiar with the basic syntax.

@font-face {

font-family: My Font;

src: url(myfont.woff);

}

The src property will accept multiple comma-separated URLs to font files. Each URL can optionally be followed by a font format hint that browsers use to select the format they support (or prefer). The following @font-face rule uses three different font formats.

@font-face {

font-family: My Font;

src: url(myfont.woff) format('woff'),

url(myfont.otf) format('opentype'),

url(myfont.ttf) format('truetype');

}

In the above example, woff, opentype and truetype are all format hints. Formats are selected by browsers based on support and the order in which they occur. Given the above example and a browser that supports OpenType and TrueType fonts, the OpenType file will be used. If we had placed the TrueType file before the OpenType file, the TrueType file would have been used instead. Alternatively, a browser with support for all three formats would use the WOFF file, which is the first format it encounters.

Unfortunately, there isn’t a single web font format that covers every browser you might want to support. There are currently six web font formats, each with their own advantages and disadvantages.

•TTF (TrueType)

•OTF (OpenType)

•EOT (Embedded OpenType)

•WOFF (Web Open Font Format)

•WOFF2 (Web Open Font Format 2)¹

•SVG fonts (Scalable Vector Graphics)

So which format(s) should you use? This depends entirely on which browsers you support. The WOFF2 format offers the best compression rates, but is only supported by the most recent browser versions². The WOFF format has much wider browser support but isn’t supported by older Android and iOS versions. However, older Android and iOS do support TrueType and OpenType fonts. If you need to support Internet Explorer 6, 7 or 8 you’ll also need to use EOT because it is the only supported format in those browsers.

The bottom line is that you should pick the formats that are most suitable for the browsers you support and give you the best compression rates. The only exception to this rule will be made for the SVG font format. SVG fonts do not support any of the OpenType features required to properly display text, such as kerning, ligatures and advanced positioning. Browser support for SVG fonts is limited; it’s been removed from Chrome, and have never been supported on IE or Firefox. The combined lack of OpenType features and limited browser support means there really is no reason to use SVG fonts either now or in the future³.

When researching @font-face on the web, you may have seen the “bulletproof” @font-face syntax⁴. This particular syntax is designed to support all browsers and font formats. It employs a special hack to work around @font-facebugs in older versions of Internet Explorer.

@font-face {

font-family: My Font;

src: url(myfont.eot?#iefix) format('embedded-opentype'),

url(myfont.woff2) format('woff2'),

url(myfont.woff) format('woff'),

url(myfont.otf) format('opentype'),

url(myfont.svg#myfont) format('svg');

}

Internet Explorer 6–8 do not support multiple URLs for the src property. These versions of IE will take the entire value of the src property as the URL. That means that they won’t just use myfont.eot, but the entire value including the other URLs, format hints, white space, and so on. You’ll see a fix for this issue in the first line of the src property. The query parameter and the fragment identifier (?#iefix) prevent this issue from happening by tricking Internet Explorer’s URL parser into thinking the remainder of the URL can be ignored. Other browsers will ignore this because the src property is valid, and the EOT format is only supported by Internet Explorer. The other formats are specified in order of preference so that browsers pick the most efficient format (e.g. in order of compression rate: WOFF2, WOFF, and TrueType/OpenType).

With usage of IE 6–8 at an all-time low and careful selection of fallback fonts, you can consider removing the EOT format from the src stack altogether. Put them in the wastebasket along with SVG fonts. This drastically simplifies the @font-face syntax and gets rid of the ugly IE-specific hack.

@font-face {

font-family: My Font;

src: url(myfont.woff2) format('woff2'),

url(myfont.woff) format('woff'),

url(myfont.otf) format('opentype');

}

Now we have coverage for Internet Explorer 9 and above, plus all modern browsers on both desktop and mobile.

Browser support for the simplified @font-face syntax. Add the EOT font format if you want to support older Internet Explorer versions.

You can find up-to-date browser support tables for all web font formats at The State Of Web Type⁵.