Web Performance Workshop

Fonts

Rendering process

• Font requests are delayed until the render tree is constructed, which can result in delayed text rendering
• If fonts are requested asynchronously, there is a potential race between first paint and the font request
• Different browsers resolve this race condition in different ways
• Ultimately you want to decide if you want re-rendering or not
• Fonts are cachable by browsers (Cache-Control, etc)

Font formats

@font-face

@font-face {
    font-family: 'Awesome Font';
    font-style: normal;
    font-weight: 400;
    src: local('Awesome Font'),
        url('/fonts/awesome-l.woff2') format('woff2'), 
        url('/fonts/awesome-l.woff') format('woff'),
        url('/fonts/awesome-l.ttf') format('ttf'),
        url('/fonts/awesome-l.eot') format('eot');
    /* Optional, not always useful */
    unicode-range: U+000-5FF; /* Latin glyphs */
}

@font-face {
    font-family: 'Awesome Font';
    font-style: normal;
    font-weight: 400;
    src: local('Awesome Font'),
        url('/fonts/awesome-jp.woff2') format('woff2'), 
        url('/fonts/awesome-jp.woff') format('woff'),
        url('/fonts/awesome-jp.ttf') format('ttf'),
        url('/fonts/awesome-jp.eot') format('eot');
    /* Optional, not always useful */
    unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}

Initial recommendations

1. Measure font downloads using Chrome Dev tools
2. Remove the @import request on styles.css
3. Don't include fonts or subsets of fonts you don't use
4. Fonts can be 64-encoded and inlined into CSS stylesheets. This is not always recommended

Google fonts

Let's go into Google Fonts and construct the same font used in this site

• Lato normal, thickness 400 and 700
• Lato italic, thickness 400 and 700

We get something like this:

<link href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic'
    rel='stylesheet'
    type='text/css'>

A common error is to simply use an @import statement as in this page's styles.css. Replace this to prevent and additional roundtrip.

Webfontloader

Webfontloader is a 13kb library from Adobe and Google that implements the Font Loading API. It includes utilities such as:

• Common interface to loading fonts regardless of the source (Google Fonts, Typekit), etc
• The webfontloader applies class names to the html element during operation
  • .wf-loading — all fonts have been requested
  • .wf-active — all fonts are available
  • .wf-inactive — none of the fonts could be loaded

In the example below we'll load a font asynchronously and replace it when available.

var WebFontConfig = {
	google: {
		families: ['Lato:400,700,400italic,700italic']
	},
	timeout: 2000
};

(function(){
	var wf = document.createElement("script");
	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
		'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	wf.async = 'true';
	document.head.appendChild(wf);
})();

/* default OS fonts */
body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* fonts now loaded */
.wf-active body {
	font-family: Lato;
}