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 ~ 2009 https://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 Loader http://www.slideshare.net/clagnut/responsive-web-fonts • Self hosted Friday, 31 May 13 

What’s in a font? TypeTool, Font Forge, Glyphs & Glyphs Mini Friday, 31 May 13 

Subset your font Don’t forget the Legals Friday, 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! 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 end // FOOTER if !fonts_are_cached do // Load in custom fonts $.ajax({ url: '#{asset_path("woff.css")}', success: function () { // Set cookie } }); 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