Web Font Performance

Web Font Performance @renettarenula Aysha Anggraini CHS Tech Talk Use
pretty fonts responsibly

@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

body { font-family: 'Open Sans', sans-serif; } CSS Will only
load when font is specifically declared under a rule

Problem Construct DOM Construct CSSOM Download Fonts! Web fonts are
lazy loaded!

Problem Image Credit: Bram Stein @ Smashing Magazine’s Real Life
Responsive Web Design (Web Fonts Performance) Results in FOUT or FOIT

Problem Different browsers handles this differently FOUT & FOIT

Present Solution Define fallback & web fonts in CSS Basic
Font Loading Strategy Leverage browser cache Load fonts dynamically & use it

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

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; } }

Font Face Observer by Bram Stein https://github.com/bramstein/fontfaceobserver

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});

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>  <p>Your content here</p> </body> </html> HTML

Leverage browser cache Detect specific font loa 
<html class="fonts-loaded">  <html>  HTML Set a cookie!

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

Problem Image Credit: Bram Stein @ Smashing Magazine’s Real Life
Responsive Web Design (Web Fonts Performance)

Future Solution Give ability to define custom loading logic Preload

Future Solution FOUT and FOIT can be reduced! Image Credit:
https://www.bramstein.com/writing/preload-hints-for-web-fonts.html

Future Solution <link rel="preload" href="assets/opensans.woff2" as="font" type="font/woff2" crossorigin> HTML Important
in order to set priority

Future Solution Source: http://caniuse.com/#search=preload

Future Solution Determines how a font-face is displayed when it
is downloading & once it is downloaded Font-Display

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

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

Font Display Spec by Tab Atkins https://tabatkins.github.io/specs/css-font-display/#font-display-desc

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

Comprehensive Guide to Font Loading Strategy by Zach Leatherman https://www.zachleat.com/web/comprehensive-webfonts/

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

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

Web Font Performance

Web Font Performance

Ren Aysha

More Decks by Ren Aysha

Other Decks in Technology

Featured

Transcript