Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Fonts and Performance

Ianfeather
May 31, 2013
160

Web Fonts and Performance

Ianfeather

May 31, 2013
Tweet

Transcript

  1. Why are fonts critical? • FOUT, what is it? •

    Where did it come from? • How big a deal is it? Friday, 31 May 13
  2. The Browser • Leverage them! • They do your work

    for you • But... you don’t always have to agree with them Friday, 31 May 13
  3. “...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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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