Web Fonts vs Web Performance

@ianfeather - Front End London, May 2013

Friday, 31 May 13

Friday, 31 May 13

Friday, 31 May 13

Friday, 31 May 13

Friday, 31 May 13

Friday, 31 May 13

How Critical is Critical?

Friday, 31 May 13

Friday, 31 May 13

Friday, 31 May 13

Why are fonts critical?

• FOUT, what is it?

• Where did it come from?

• How big a deal is it?

Friday, 31 May 13

The Browser

• Leverage them!

• They do your work for you

• But... you don’t always have to agree with them

Friday, 31 May 13

“...user agents may render text as it would be rendered if downloadable font resources are not available or they may render text transparently with fallback fonts to avoid a flash of text using a fallback font.”

The Spec

In cases where the font download fails user agents must display text, simply leaving transparent text is considered non-conformant behavior.”

Friday, 31 May 13

The Implementation

IE FF Chrome, Safari, Opera (2.15)

Text rendered immediately then repainted later

Invisible Text

3s Timeout

Invisible Text

No Timeout

PS. They’re working on it...https://bugs.webkit.org/show_bug.cgi?id=25207 ~ 2009https://code.google.com/p/chromium/issues/detail?id=235303 ~ 2013

Friday, 31 May 13

What are our options?

Friday, 31 May 13

Font Serving Services

• JS Options e.g. Typekit

• Google Web Font Loaderhttp://www.slideshare.net/clagnut/responsive-web-fonts

• Self hosted

Friday, 31 May 13

What’s in a font?

TypeTool, Font Forge, Glyphs & Glyphs MiniFriday, 31 May 13

Subset your font

Don’t forget the LegalsFriday, 31 May 13

Add Icons

Friday, 31 May 13

Choose your weapon

Friday, 31 May 13

Implementation Techniques(On & Off the Critical Path)

1. Synchronous, external

2. Synchronous, inline

3. Simple async solution

4. Local Storage async

5. Async and defer to 2nd page

Friday, 31 May 13

Synchronous, external

@font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }

http://www.fontsquirrel.com/tools/webfont-generator

Friday, 31 May 13

Synchronous, inline• WOFF can be base64 encoded and inlined.

• Slower perceived speed

• Don’t serve it to IE!

<!--[if (gt IE 8) | (IEMobile)]><!--> <link href="common_core_with_base64.css" media="all" rel="stylesheet" type="text/css" /><!--<![endif]-->

<!--[if (lt IE 9) & (!IEMobile)]> <link href="common_core_without_base64.css" media="all" rel="stylesheet" type="text/css" /><![endif]-->

Friday, 31 May 13

Simple Async var f, x;

x = document.getElementsByTagName("script")[0];

f = window.document.createElement("link");

f.rel = "stylesheet";

f.href = "#{asset_path("woff.css")}"; window.setTimeout(function(){ x.parentNode.insertBefore(f, x); },0)

• Don’t forget to factor in non-woff versions

Friday, 31 May 13

Local Storage Async

• Uses the browser Local Storage rather than HTTP Cache

• A solution by the Guardian Team (https://github.com/guardian/frontend/blob/master/common/app/assets/javascripts/modules/fonts.js)

• Loads the font with (well controlled) FOUT

Friday, 31 May 13

Async & Defer // HEADER if fonts_are_cached do <link href=”woff.css” rel=”stylesheet” /> end

// FOOTER if !fonts_are_cached do <script> // Load in custom fonts $.ajax({ url: '#{asset_path("woff.css")}', success: function () { // Set cookie } }); </script> end

Read more: http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/

Friday, 31 May 13

Which is difficult if you’ve added icons...

Friday, 31 May 13

What next?

• Client hints, connectionType and its blatant misuse

• Browsers giving authors the option of how to render a custom font

Friday, 31 May 13

Thanks, any questions?

Friday, 31 May 13