The Performance and Usability of Font Loading (Velocity NYC 2015)

The Performance and Usability of Web Fonts Zach Leatherman @zachleat

@zachleat zachleat.com

N C T @

N T O F C A F E @ -

THE DEFAULT BROWSER BEHAVIOR FOR FONT-LOADING IS HARMFUL TO BOTH
THE PERCEIVED PERFORMANCE AND INTEGRITY OF CONTENT ON THE WEB. FONT-LOADING INTEGRITY PERCEIVED PERFORMANCE

56% http://httparchive.org/trends.php OF WEB SITES

http://httparchive.org/trends.php AVERAGE PAYLOAD 105KB

0 350 700 1050 1400 CSS javaScript Images WebFonts TRANSFER
SIZE

REMOVE AN IMAGE! JAVASCRIPT SIZE? WORRIED ABOUT

NOT ALL REQUESTS ARE CREATED EQUAL

PERCEIVED PERFORMANCE

JavaScript

WEB FONT

A G EN D A TRIGGER A FONT DOWNLOAD BEHAVIOR
WHILE DOWNLOADING 1. 2.

@font-‐face { font-‐family: The Font that Could; src:
url('icanfont.woff2') format('woff2'), url('icanfont.woff') format('woff'), url('icanfont.otf') format('opentype'); }

WOFF2 WOFF OTF SVG T 2.3–4.3

WOFF2 WOFF

IS 30% SMALLER THAN WOFF On average across all of
Google Fonts: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/j27Ou4RtvQI/discussion WOFF2

<!doctype html> <style> @font-‐face { font-‐family: My
Web Font; src: url('icanfont.woff2') format('woff2'), url('icanfont.woff') format('woff'); } </style>

dAY since last pluralization ERROR 1

dAY 0 since last pluralization ERROR

IF NOT USED, NOT DOWNLOADED

<p style="font-‐family: My Web Font"></p> 9+

<p style="font-‐family: My Web Font"> Needs Content.
</p>

8 36+ 23+ 6.1+ 2.3+ 7+ DOWNLOADS WITH EMPTY ATTACHED
ELEMENT DOWNLOADS EVERY TIME DOWNLOADS WITH NON-EMPTY ATTACHED ELEMENT 28+ 9+ &

RESTRICT TO SPECIFIC CHARACTERS

unicode- range

BASIC LATIN CODE POINTS Arial Chunk Five x26 & &
x41 A A x42 B B x43 C C x2B + + x3F ? ?

@font-‐face { font-‐family: Ampersand; src: url('sands.woff2')
format('woff2'), url('sands.woff') format('woff'); unicode-‐range: U+26; } unicode- range

<div style="font-‐family: Ampersand">Needs Content.</div>

<div style="font-‐family: Ampersand">Needs an &</div>

Needs an _ FALLBACK Web Font

unicode- range 36 9+ 23 8+ 2.1+ 8+ ALWAYS DOWNLOADS
SMART DOWNLOAD NOT SUPPORTED &

Matching Font-Family USED IN DOCUMENT CONTENT FONT-WEIGHT FONT-STYLE ✔ Images
courtesy of http://www.w3.org/TR/css3-fonts/ ✔

<!doctype html> <style> @font-‐face { font-‐family: My
Web Font; src: url('icanfont.woff2') format('woff2'), url('icanfont.woff') format('woff'); font-‐weight: 400; font-‐style: normal; } </style>

@font-‐face { font-‐family: My Web Font;
font-‐weight: 400; font-‐style: normal; } p { font-‐family: My Web Font; font-‐weight: 400; font-‐style: normal; }

font-‐weight: 400; font-‐style: normal; } p { font-‐family: My Web Font; font-‐weight: 400; font-‐style: normal; } ✔

100 200 300 400 500 600 700 800 900 FONT-WEIGHT
DEFAULT CSS font-‐weight: normal; DEFAULT CSS font-‐weight: bold; ‐ ‑ ‑ ‐ Lighter weights Bolder weights

@font-‐face { font-‐weight: 500; font-‐style: normal; } @font-‐face {
font-‐weight: 400; font-‐style: normal; } @font-‐face { font-‐weight: 300; font-‐style: normal; } @font-‐face { font-‐weight: 200; font-‐style: normal; } @font-‐face { font-‐weight: 100; font-‐style: normal; } @font-‐face { font-‐weight: 600; font-‐style: normal; } @font-‐face { font-‐weight: 700; font-‐style: normal; } @font-‐face { font-‐weight: 800; font-‐style: normal; } @font-‐face { font-‐weight: 900; font-‐style: normal; } /* REPEAT THE SAME, WITH font-‐style: italic; */ p { font-‐weight: 500; font-‐style: normal; }

100 200 300 400 500 600 700 800 900 FONT-WEIGHT
<p> ‐ ‑ ‐ Lighter weights Bolder weights

MisMatch weight 600 Available, 100 assigned, FORCED BOLD p {
font-‐family: My Web Font; font-‐weight: 100; font-‐style: normal; } @font-‐face { font-‐family: My Web Font; font-‐weight: 600; font-‐style: normal; }

MISMATCH STYLE ITALIC AVAILABLE, NORMAL ASSIGNED, FORCED ITALIC p {
font-‐family: My Web Font; font-‐weight: 400; font-‐style: normal; } @font-‐face { font-‐family: My Web Font; font-‐weight: 400; font-‐style: italic; }

@font-‐face { font-‐weight: 600; font-‐style: normal; } @font-‐face {
font-‐weight: 700; font-‐style: normal; } @font-‐face { font-‐weight: 800; font-‐style: normal; } @font-‐face { font-‐weight: 900; font-‐style: normal; } /* FAUX BOLD */ @font-‐face { font-‐weight: 500; font-‐style: normal; } @font-‐face { font-‐weight: 400; font-‐style: normal; } @font-‐face { font-‐weight: 300; font-‐style: normal; } @font-‐face { font-‐weight: 200; font-‐style: normal; } @font-‐face { font-‐weight: 100; font-‐style: normal; } /* END FAUX BOLD */ /* REPEAT THE SAME, WITH font-‐style: italic; */ p { font-‐weight: 600; font-‐style: normal; }

100 200 300 400 500 600 700 800 900 FONT-WEIGHT
<p> ‐ ‑ ‐ Normal/Roman @font-‐face Bold @font-‐face Faux Bold

MisMatch weight 500 Available, 600 assigned, FAUX BOLD p {
font-‐family: My Web Font; font-‐weight: 600; font-‐style: normal; } @font-‐face { font-‐family: My Web Font; font-‐weight: 500; font-‐style: normal; }

MISMATCH STYLE p { font-‐family: My Web Font;
font-‐weight: 400; font-‐style: italic; } @font-‐face { font-‐family: My Web Font; font-‐weight: 400; font-‐style: normal; } NORMAL AVAILABLE, ITALIC ASSIGNED, FAUX ITALIC

DISABLE FAUX FONTS WITH FONT-SYNTHESIS

http://stateofwebtype.com/ STATE OF WEB TYPE

BE FRUGAL BE

BE FRUGAL BUT NOT TOO

instagram.com 6 @font-face BLOCKS

.page-‐home .content .home-‐login i { font-‐style: normal;
}

SAVES 13.4KB FOR EACH EMPTY-CACHE PAGELOAD TO INSTAGRAM.COM

i, cite, em, var, address, dfn, strong, b,
h1, h2, h3, h4, h5, h6, th

Matching Font-Family USED IN DOCUMENT CONTENT FONT-WEIGHT FONT-STYLE ✔ Images
courtesy of http://www.w3.org/TR/css3-fonts/ ✔ ✔ ✔

A G EN D A TRIGGER A FONT DOWNLOAD BEHAVIOR
WHILE DOWNLOADING 1. 2.

FONT FINISHES LOADING A B FONT IS USED, STARTS LOADING
@FONT-FACE IS PARSED

LOCAL FONT { @FONT-FACE { A B

Flash of Invisible Text F O I T

http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0

People will visit a Web site less often if it
is slower than a close competitor by more than 250 milliseconds.” http://www.nytimes.com/2012/03/01/technology/impatient-web-users-ﬂee-slow-loading-sites.html “

https://twitter.com/zoompf/status/578901383253995520

http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0

LOCAL FONT { @FONT-FACE { A 3s B

Flash of UNSTYLED Text F O U T

IS 3 SECONDS A GOOD TIMEOUT?

https://twitter.com/zoompf/status/578901383253995520

NOT JUST A PERFORMANCE PROBLEM

https://twitter.com/jmuspratt/status/561239961924403200

LOCAL FONT { @FONT-FACE {

FOUT FOIT REVIEW

ABCDEFGH FOIT @FONT-FACE LOAD

FOIT to FOUT, 3 seconds

3 S ABCDEFGH FOIT to FOUT, 3 seconds

3 S ABCDEFGH FOIT to FOUT, 3 seconds @FONT-FACE LOAD

FOUT, 0 seconds ABCDEFGH

ABCDEFGH FOUT, 0 seconds @FONT-FACE LOAD

“But FOUT is ugly.”

PNG BASELINE JPEG Progressive JPEG

WebPageTest.org

SOLUTION CONTINUUM

FOUT DO NOTHING EMBRACE BROWSER DEFAULTS 0 SECOND TIMEOUT FOUT
FOIT N SECOND TIMEOUT FOIT InFINITE TIMEOUT N > 0

DO NOTHING EMBRACE BROWSER DEFAULTS FOIT InFINITE TIMEOUT FONT REQUESTs
ARE A SINGLE POINT OF FAILURE

STOP BUTTON HAS NO EFFECT

ANTI- PATTERNS

CSS ONLOAD

src: url('icanfont.woff') format('woff'); } @font-‐face { font-‐family: My Web Font; src: url('icanfontbold.woff') format('woff'); font-‐weight: 700; }

BLOCKING FONTS.CSS Blocking FONT REQUESTS

BLOCKING FONTS.CSS Blocking FONT REQUESTS A Fonts start
loading

BLOCKING FONTS.CSS Blocking FONT REQUESTS onload Fonts finish
loading B A Fonts start loading

ASYNC- CSS

BLOCKING FONTS.CSS

ASYNC FONTS.CSS

ASYNC FONTS.CSS Blocking FONT REQUESTS onload Fonts finish
loading B A Fonts start loading

filamentgroup / loadcss https://github.com/filamentgroup/loadCSS

ASYNC- CSS with DATA URIS

src: url('data:application/x-‐font-‐ woff;charset=utf-‐8;base64,...') format('woff'); } @font-‐face { font-‐family: My Web Font; src: url('data:application/x-‐font-‐ woff;charset=utf-‐8;base64,...') format('woff'); font-‐weight: 700; }

ASYNC FONTS.CSS Font Data URIs finish loading B
A Font Data URIs start loading REPAINT

INLINE DATA URIS WITH MAIN CSS

ONE 50KB CSS REQUEST NO FONT REQUESTS

@font-‐face { font-‐family: Roboto; src: url('data:application/x-‐font-‐
woff;charset=utf-‐8;base64,...') format('woff'); } @font-‐face { font-‐family: Roboto; src: url('data:application/x-‐font-‐ woff;charset=utf-‐8;base64,...') format('woff'); font-‐weight: 700; }

FOUT 0 SECOND TIMEOUT FOUT FOIT N SECOND TIMEOUT N
> 0 EMBRACE MORE FOUT

font-DISPLAY CSS DESCRIPTOR https://tabatkins.github.io/specs/css-font-display/ from Kenji Baheux, Tab Atkins

CSS Font Loading http://dev.w3.org/csswg/css-font-loading/

FONTFACEONLOAD github.com/zachleat/fontfaceonload USES THE CSS FONT LOADING API WHEN AVAILABLE.
FONTFACEOBSERVER github.com/bramstein/fontfaceobserver/ INCLUDES A NICE PROMISES POLYFILL

0 SECOND TIMEOUT FOUT

var doc = document, docEl =
doc.documentElement; doc.fonts.load("1em Raleway") .then(function() { // The font has loaded. docEl.className += " raleway-‐loaded"; }); ‑

body { font-‐family: sans-‐serif; } .raleway-‐loaded
body { font-‐family: Raleway, sans-‐serif; } ‑

FONT REQUEST REPAINT Font finishes loading B A
Font starts loading

FOUT RALEWAY font-‐display: swap;

FOUT @FONT-FACE LOAD font-‐display: swap;

FOUT FOIT N SECOND TIMEOUT N > 0

var docEl = document.documentElement; docEl.className += " raleway-‐loading";
window.setTimeout(function() { docEl.className += " raleway-‐fallback"; }, 1000); document.fonts.load("1em Raleway").then(function() { docEl.className += " raleway-‐loaded"; }); ‑

.raleway-‐loading body { color: transparent; }
.raleway-‐fallback body, .raleway-‐loaded body { color: inherit; } .raleway-‐fallback body { font-‐family: serif; } .raleway-‐loaded body { font-‐family: Raleway, serif; } ‑

FOIT to FOUT, 1 second

1 S FOIT to FOUT, 1 second RALEWAY

1 S FOIT to FOUT, 1 second @FONT-FACE LOAD

https://twitter.com/jmuspratt/status/561239961924403200

ONE REPAINT TO RULE THEM ALL

Promise.all([ document.fonts.load("400 1em Raleway"), document.fonts.load("700 1em
Raleway") ]).then(function () { docEl.className += " raleway-‐loaded"; }); ‑ document.fonts.load("1em Raleway").then(function() { docEl.className += " raleway-‐loaded"; }); BECOMES

FONT REQUESTS

FONT REQUESTS REPAINT Fonts finish loading B A
Fonts start loading

TWO REPAINTS TO RULE THEM ALL

MOST JARRING REPAINT FOR ROMAN ROMAN

MOST JARRING REPAINT FOR ROMAN BOLD ITALIC BOLD ITALIC
ROMAN

FAUX VERSIONS ROMAN

FAUX VERSIONS FINAL REPAINT ROMAN

ARIAL ARIAL BOLD

EXO EXO FAUX BOLD

EXO EXO BOLD

FLASH OF FAUX TEXT zachleat.com/web/foft/

FALLBACKS ARE IMPORTANT

fontfamily.io

MINIMIZE THE FALLBACK to WEBFONT REFLOW

font-‐family FALLBACK STYLE font-‐size font-‐size-‐adjust line-‐height

Web Font Tune-up Time: A Fun Font Fallback Event http://blog.fonts.com/2011/08/web-font-tune-up-
time-a-fun-font-fallback-event/

THERE ARE A LOT OF TOOLS AT OUR DISPOSAL TO
EASE THE TRANSITION FROM FALLBACK TO WEBFONT

THE DEFAULT BROWSER BEHAVIOR FOR FONT-LOADING IS HARMFUL TO BOTH
THE PERCEIVED PERFORMANCE AND INTEGRITY OF CONTENT ON THE WEB. FONT-LOADING INTEGRITY PERCEIVED PERFORMANCE

USE A FONT LOADING STRATEGY.

DON’t ACCEPT THE DEFAULTS.

@zachleat zachleat.com

The Performance and Usability of Font Loading (...

The Performance and Usability of Font Loading (Velocity NYC 2015)

More Decks by zachleat

Other Decks in Programming

Featured

Transcript