Web Font Performance - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Problem Different browsers handles this differently FOUT & FOIT

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Your content here

HTML

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Leverage browser cache Detect specific font loa HTML Set a cookie!

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Future Solution Give ability to define custom loading logic Preload

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Future Solution HTML Important in order to set priority

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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 HTML Can be combined to make font loading efficient

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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