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

Web Font Performance

Ren Aysha
November 10, 2016

Web Font Performance

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