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

The Performance and
Usability of Web Fonts
Zach Leatherman
@zachleat

View Slide

@zachleat
zachleat.com

View Slide

View Slide

N C

T
@

View Slide

N T
O
F C
A
F E
@ -

View Slide

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

View Slide

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

View Slide

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

View Slide

0
350
700
1050
1400
CSS javaScript Images WebFonts
TRANSFER
SIZE

View Slide

REMOVE AN IMAGE!
JAVASCRIPT SIZE?
WORRIED ABOUT

View Slide

NOT ALL
REQUESTS
ARE CREATED
EQUAL

View Slide

PERCEIVED
PERFORMANCE

View Slide

IMG

View Slide

CSS

View Slide

JavaScript

View Slide

WEB FONT

View Slide

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

View Slide

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

View Slide

WOFF2
WOFF
OTF
SVG
T 2.3–4.3

View Slide

WOFF2
WOFF

View Slide

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

View Slide

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

View Slide

View Slide

dAY
since last
pluralization ERROR
1

View Slide

dAY
0
since last
pluralization ERROR

View Slide

IF NOT USED,
NOT DOWNLOADED

View Slide

9+

View Slide

Needs Content.

View Slide

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

View Slide

RESTRICT TO
SPECIFIC
CHARACTERS

View Slide

unicode-
range

View Slide

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

View Slide

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

View Slide

Ampersand">Needs Content.

View Slide

Ampersand">Needs an &

View Slide

Needs an _
FALLBACK
Web Font

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

@font-‐face {
}
p {
}
✔

View Slide

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

View Slide

@font-‐face { font-‐weight: 500; font-‐style: normal; }
/* REPEAT THE SAME, WITH font-‐style: italic; */
p {
}

View Slide

100 200 300 400 500 600 700 800 900
FONT-WEIGHT

‐
‑
‐
Lighter weights Bolder weights

View Slide

MisMatch weight
600 Available, 100 assigned, FORCED BOLD
p {
}
@font-‐face {
}

View Slide

MISMATCH STYLE
ITALIC AVAILABLE, NORMAL ASSIGNED, FORCED ITALIC
p {
}
@font-‐face {
font-‐style: italic;
}

View Slide

/* FAUX BOLD */
/* END FAUX BOLD */
/* REPEAT THE SAME, WITH font-‐style: italic; */
p {
}

View Slide

100 200 300 400 500 600 700 800 900
FONT-WEIGHT

‐
‑
‐
Normal/Roman @font-‐face Bold @font-‐face
Faux Bold

View Slide

MisMatch weight
500 Available, 600 assigned, FAUX BOLD
p {
}
@font-‐face {
}

View Slide

MISMATCH STYLE
p {
font-‐style: italic;
}
@font-‐face {
}
NORMAL AVAILABLE, ITALIC ASSIGNED, FAUX ITALIC

View Slide

DISABLE FAUX FONTS WITH
FONT-SYNTHESIS

View Slide

View Slide

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

View Slide

@font-‐face { font-‐weight: 400; font-‐style: normal; } 

Roman Text
Bold Text
Bold Text
Italic Text
Italic Text

View Slide

BE FRUGAL
BE

View Slide

BE FRUGAL
BUT NOT TOO

View Slide

instagram.com
6 @font-face BLOCKS

View Slide

View Slide

.page-‐home .content .home-‐login i {
}

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

LOCAL FONT
{
@FONT-FACE
{ A B

View Slide

Flash of Invisible Text
F O I T

View Slide

FOIT

View Slide

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

View Slide

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
“

View Slide

View Slide

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

View Slide

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

View Slide

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

View Slide

Flash of UNSTYLED Text
F O U T

View Slide

FOUT

View Slide

IS 3 SECONDS
A GOOD TIMEOUT?

View Slide

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

View Slide

NOT JUST A
PERFORMANCE
PROBLEM

View Slide

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

View Slide

View Slide

LOCAL FONT
{
@FONT-FACE
{

View Slide

FOUT
FOIT
REVIEW

View Slide

FOIT

View Slide

ABCDEFGH
FOIT
@FONT-FACE LOAD

View Slide

FOIT to FOUT, 3 seconds

View Slide

3 S
ABCDEFGH

View Slide

3 S
ABCDEFGH
@FONT-FACE LOAD

View Slide

FOUT, 0 seconds
ABCDEFGH

View Slide

ABCDEFGH
FOUT, 0 seconds
@FONT-FACE LOAD

View Slide

“But FOUT is ugly.”

View Slide

PNG
BASELINE
JPEG
Progressive
JPEG

View Slide

WebPageTest.org

View Slide

SOLUTION
CONTINUUM

View Slide

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

View Slide

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

View Slide

STOP BUTTON HAS
NO EFFECT

View Slide

ANTI-
PATTERNS

View Slide

CSS
ONLOAD

View Slide

h1 { font-‐family: serif; } .loaded h1 { font-‐family: My Web Font; } 
onload="document.body.className+='
loaded';" rel="stylesheet">

View Slide

@font-‐face {
src: url('icanfont.woff') format('woff');
}
@font-‐face {
src: url('icanfontbold.woff') format('woff');
}

View Slide

BLOCKING
FONTS.CSS
Blocking
FONT REQUESTS

View Slide

BLOCKING
FONTS.CSS
Blocking
FONT REQUESTS
A Fonts
start
loading

View Slide

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

View Slide

ASYNC-
CSS

View Slide

h1 { font-‐family: serif; } .loaded h1 { font-‐family: My Web Font; } 
onload="document.body.className+='
loaded'; this.media='all'"
rel="stylesheet">

View Slide

BLOCKING
FONTS.CSS

View Slide

ASYNC
FONTS.CSS

View Slide

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

View Slide

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

View Slide

ASYNC-
CSS
with
DATA
URIS

View Slide

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

View Slide

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

View Slide

View Slide

INLINE DATA URIS WITH
MAIN CSS

View Slide

View Slide

ONE 50KB CSS REQUEST
NO FONT REQUESTS

View Slide

@font-‐face {
font-‐family: Roboto;
}
@font-‐face {
font-‐family: Roboto;
}

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

0 SECOND
TIMEOUT
FOUT

View Slide

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

View Slide

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

View Slide

FONT REQUEST
REPAINT
Font
finishes
loading
B
A Font
starts
loading

View Slide

FOUT
RALEWAY
font-‐display: swap;

View Slide

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

View Slide

FOUT
FOIT
N SECOND
TIMEOUT
N > 0

View Slide

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

View Slide

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

View Slide

FOIT to FOUT, 1 second

View Slide

1 S
RALEWAY

View Slide

1 S
@FONT-FACE LOAD

View Slide

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

View Slide

ONE REPAINT
TO RULE THEM ALL

View Slide

Promise.all([
document.fonts.load("400 1em Raleway"),
document.fonts.load("700 1em Raleway")
]).then(function () {
});
‑
document.fonts.load("1em Raleway").then(function() {
});
BECOMES

View Slide

FONT REQUESTS

View Slide

FONT REQUESTS
REPAINT
Fonts
finish
loading
B
A Fonts
start
loading

View Slide

TWO REPAINTS
TO RULE THEM ALL

View Slide

MOST JARRING
REPAINT FOR ROMAN
ROMAN

View Slide

MOST JARRING
REPAINT FOR ROMAN
BOLD
ITALIC
BOLD ITALIC
ROMAN

View Slide

MOST JARRING
REPAINT FOR ROMAN
BOLD
ITALIC
BOLD ITALIC
FAUX
VERSIONS
ROMAN

View Slide

MOST JARRING
REPAINT FOR ROMAN
BOLD
ITALIC
BOLD ITALIC
FAUX
VERSIONS
FINAL REPAINT
ROMAN

View Slide

ARIAL ARIAL BOLD

View Slide

EXO EXO FAUX BOLD

View Slide

EXO EXO BOLD

View Slide

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

View Slide

FALLBACKS ARE
IMPORTANT

View Slide

View Slide

fontfamily.io

View Slide

MINIMIZE THE
FALLBACK
to
WEBFONT
REFLOW

View Slide

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

View Slide

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/

View Slide

View Slide

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

View Slide

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

View Slide

USE A
FONT LOADING
STRATEGY.

View Slide

DON’t ACCEPT
THE DEFAULTS.

View Slide

@zachleat
zachleat.com

View Slide

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

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

zachleat

More Decks by zachleat

Other Decks in Programming

Featured

Transcript