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

Web Font Performance

Avatar for Ren Aysha Ren Aysha
November 10, 2016

Web Font Performance

Avatar for Ren Aysha

Ren Aysha

November 10, 2016
Tweet

More Decks by Ren Aysha

Other Decks in Technology

Transcript

  1. body { font-family: 'Open Sans', sans-serif; } CSS Will only

    load when font is specifically declared under a rule
  2. Problem Image Credit: Bram Stein @ Smashing Magazine’s Real Life

    Responsive Web Design (Web Fonts Performance) Results in FOUT or FOIT
  3. Present Solution Define fallback & web fonts in CSS Basic

    Font Loading Strategy Leverage browser cache Load fonts dynamically & use it
  4. 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
  5. 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; } }
  6. Present Solution Define fallback & web fonts in CSS Basic

    Font Loading Strategy Leverage browser cache Load fonts dynamically & use it
  7. 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});
  8. 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
  9. Present Solution Define fallback & web fonts in CSS Basic

    Font Loading Strategy Leverage browser cache Load fonts dynamically & use it
  10. 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!
  11. 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
  12. Problem Image Credit: Bram Stein @ Smashing Magazine’s Real Life

    Responsive Web Design (Web Fonts Performance)
  13. Future Solution FOUT and FOIT can be reduced! Image Credit:

    https://www.bramstein.com/writing/preload-hints-for-web-fonts.html
  14. Future Solution Determines how a font-face is displayed when it

    is downloading & once it is downloaded Font-Display
  15. 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
  16. 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
  17. 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