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

Web Font Performance

C10dcb7b950404a39e682478155aee14?s=47 Ren Aysha
November 10, 2016

Web Font Performance

C10dcb7b950404a39e682478155aee14?s=128

Ren Aysha

November 10, 2016
Tweet

Transcript

  1. Web Font Performance @renettarenula Aysha Anggraini CHS Tech Talk Use

    pretty fonts responsibly
  2. @font-face { font-family: 'Open Sans'; src: url('open-sans.woff2') format("woff2"), url('open-sans.woff') format("woff");

    } CSS Does not guarantee load of fonts
  3. body { font-family: 'Open Sans', sans-serif; } CSS Will only

    load when font is specifically declared under a rule
  4. Problem Construct DOM Construct CSSOM Download Fonts! Web fonts are

    lazy loaded!
  5. Problem Image Credit: Bram Stein @ Smashing Magazine’s Real Life

    Responsive Web Design (Web Fonts Performance) Results in FOUT or FOIT
  6. Problem Different browsers handles this differently FOUT & FOIT

  7. None
  8. None
  9. Present Solution Define fallback & web fonts in CSS Basic

    Font Loading Strategy Leverage browser cache Load fonts dynamically & use it
  10. Define fallback & web fonts in CSS @font-face { font-family:

    'Open Sans'; src: url('open-sans.woff2') format("woff2"), url('open-sans.woff') format("woff"); } CSS
  11. Define fallback & web fonts in CSS Detect specific font

    loa body { font-family: sans-serif; } CSS .fonts-loaded { body { font-family: 'Open Sans', sans-serif; } }
  12. Present Solution Define fallback & web fonts in CSS Basic

    Font Loading Strategy Leverage browser cache Load fonts dynamically & use it
  13. Font Face Observer by Bram Stein https://github.com/bramstein/fontfaceobserver

  14. Detect specific font load (Basic Font Load) Detect specific font

    loa font.load().then(function () { // Font successfully loads; use webfont class window.document.documentElement.className += " fonts-loaded"; }); JS // Font Face Observer is written by Bram Stein: // https://github.com/bramstein/fontfaceobserver var font = new FontFaceObserver("Open Sans", {weight: 400});
  15. Toggle class in order to use web fonts Detect specific

    font loa body { font-family: sans-serif; } .fonts-loaded { body { font-family: 'Open Sans', sans-serif; } } CSS <html class="fonts-loaded"> <body> <!-- Open sans fonts with class added w JS --> <p>Your content here</p> </body> </html> HTML
  16. None
  17. Present Solution Define fallback & web fonts in CSS Basic

    Font Loading Strategy Leverage browser cache Load fonts dynamically & use it
  18. Leverage browser cache Detect specific font loa <!--#if expr="$HTTP_COOKIE=/fonts\-loaded\=true/" -->

    <html class="fonts-loaded"> <!--#else --> <html> <!--#endif --> HTML Set a cookie!
  19. Leverage Browser Cache Detect specific font loa // do not

    do anything if class is set if (w.document.documentElement.className.indexOf("fonts-loaded") > -1) { return; } var font = new FontFaceObserver("Open Sans", {weight: 400}); font.load().then(function () { window.document.documentElement.className += " fonts-loaded"; // Set cookie to optimize for repeat views document.cookie = "fonts_loaded=true; domain=" + viki.com + "; path=/"; }); JS
  20. Problem Image Credit: Bram Stein @ Smashing Magazine’s Real Life

    Responsive Web Design (Web Fonts Performance)
  21. Future Solution Give ability to define custom loading logic Preload

  22. Future Solution FOUT and FOIT can be reduced! Image Credit:

    https://www.bramstein.com/writing/preload-hints-for-web-fonts.html
  23. Future Solution <link rel="preload" href="assets/opensans.woff2" as="font" type="font/woff2" crossorigin> HTML Important

    in order to set priority
  24. Future Solution Source: http://caniuse.com/#search=preload

  25. Future Solution Determines how a font-face is displayed when it

    is downloading & once it is downloaded Font-Display
  26. Future Solution @font-face { font-family: 'Open Sans'; font-display: 'auto'; src:

    local('Open Sans Light'), local('OpenSans-Light'), url('open-sans-v13-latin-300.woff2') format('woff2'); } CSS
  27. Future Solution @font-face { font-display: auto | block | swap

    | fallback | optional; } Determine by user agent Invisible text & swap once fonts is loaded (FOIT) Show fallback & swap once fonts is loaded (FOUT) Same as swap but will show fallback when font fails to load Font is used if it is already downloaded; else fallback is used Source: https://tabatkins.github.io/specs/css-font-display/#font-display-desc
  28. Font Display Spec by Tab Atkins https://tabatkins.github.io/specs/css-font-display/#font-display-desc

  29. Future Solution Detect specific font loa @font-face { font-family: 'Open

    Sans'; font-display: 'fallback'; src: local('Open Sans'), local('OpenSans-Light'), url('open-sans.woff2') format('woff2'); } CSS <link rel="preload" href="open-sans.woff2" as="font" type="font/woff2"> HTML Can be combined to make font loading efficient
  30. Comprehensive Guide to Font Loading Strategy by Zach Leatherman https://www.zachleat.com/web/comprehensive-webfonts/

  31. Web Font Loading Patterns by Bram Stein https://www.bramstein.com/writing/web-font-loading-patterns.html

  32. Thank You! renaysha.me codepen.io/rrenula @renettarenula