Web Performance Workshop

by Diego Cardozo @ JSConfUY 2016

View the Project on GitHub diegocard/web-performance-workshop


Rendering process

Font formats

Format Browser support Compression
EOT IE only No
TTF Partial IE support No
WOFF Widest support Yes
WOFF 2.0 Modern browsers ~30% less size and preprocessing


@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

We get something like this:

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

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 is a 13kb library from Adobe and Google that implements the Font Loading API. It includes utilities such as:

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

	var wf = document.createElement("script");
	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
	wf.async = 'true';

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

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