The Performance and
Usability of Web Fonts
Zach Leatherman
@zachleat
Slide 2
Slide 2 text
@zachleat
zachleat.com
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
N C
T
@
Slide 5
Slide 5 text
N T
O
F C
A
F E
@ -
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
56%
http://httparchive.org/trends.php
OF WEB SITES
Slide 8
Slide 8 text
http://httparchive.org/trends.php
AVERAGE PAYLOAD
105KB
A
G
EN
D
A
TRIGGER A FONT DOWNLOAD
BEHAVIOR WHILE DOWNLOADING
1.
2.
Slide 18
Slide 18 text
@font-‐face
{
font-‐family:
The
Font
that
Could;
src:
url('icanfont.woff2')
format('woff2'),
url('icanfont.woff')
format('woff'),
url('icanfont.otf')
format('opentype');
}
Slide 19
Slide 19 text
WOFF2
WOFF
OTF
SVG
T 2.3–4.3
Slide 20
Slide 20 text
WOFF2
WOFF
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
@font-‐face
{
font-‐family:
My
Web
Font;
src:
url('icanfont.woff2')
format('woff2'),
url('icanfont.woff')
format('woff');
}
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
dAY
since last
pluralization ERROR
1
Slide 25
Slide 25 text
dAY
0
since last
pluralization ERROR
Slide 26
Slide 26 text
IF NOT USED,
NOT DOWNLOADED
Slide 27
Slide 27 text
9+
Slide 28
Slide 28 text
Needs
Content.
Slide 29
Slide 29 text
8
36+
23+
6.1+
2.3+
7+
DOWNLOADS WITH
EMPTY
ATTACHED ELEMENT
DOWNLOADS
EVERY TIME
DOWNLOADS WITH
NON-EMPTY
ATTACHED ELEMENT
28+
9+ &
Slide 30
Slide 30 text
RESTRICT TO
SPECIFIC
CHARACTERS
Slide 31
Slide 31 text
unicode-
range
Slide 32
Slide 32 text
BASIC
LATIN
CODE
POINTS Arial Chunk Five
x26 & &
x41 A A
x42 B B
x43 C C
x2B + +
x3F ? ?
unicode-
range
36
9+
23
8+
2.1+
8+
ALWAYS DOWNLOADS SMART DOWNLOAD
NOT SUPPORTED
&
Slide 38
Slide 38 text
Matching Font-Family
USED IN DOCUMENT CONTENT
FONT-WEIGHT
FONT-STYLE
✔
Images courtesy of http://www.w3.org/TR/css3-fonts/
✔
Slide 39
Slide 39 text
@font-‐face
{
font-‐family:
My
Web
Font;
src:
url('icanfont.woff2')
format('woff2'),
url('icanfont.woff')
format('woff');
font-‐weight:
400;
font-‐style:
normal;
}
Slide 40
Slide 40 text
p
{
font-‐family:
My
Web
Font;
font-‐weight:
400;
font-‐style:
normal;
}
Roman
Text
Slide 41
Slide 41 text
@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;
}
Slide 42
Slide 42 text
@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;
}
✔
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;
}
Slide 47
Slide 47 text
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;
}
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;
}
Slide 51
Slide 51 text
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
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-flee-slow-loading-sites.html
“
FOUT
0 SECOND
TIMEOUT
FOUT
FOIT
N SECOND
TIMEOUT
N
>
0
EMBRACE MORE
FOUT
Slide 135
Slide 135 text
font-DISPLAY CSS DESCRIPTOR
https://tabatkins.github.io/specs/css-font-display/
from Kenji Baheux, Tab Atkins
Slide 136
Slide 136 text
CSS Font Loading
http://dev.w3.org/csswg/css-font-loading/
Slide 137
Slide 137 text
FONTFACEONLOAD
github.com/zachleat/fontfaceonload
USES THE CSS FONT LOADING API WHEN AVAILABLE.
FONTFACEOBSERVER
github.com/bramstein/fontfaceobserver/
INCLUDES A NICE PROMISES POLYFILL
Slide 138
Slide 138 text
0 SECOND
TIMEOUT
FOUT
Slide 139
Slide 139 text
var
doc
=
document,
docEl
=
doc.documentElement;
doc.fonts.load("1em
Raleway")
.then(function()
{
//
The
font
has
loaded.
docEl.className
+=
"
raleway-‐loaded";
});
‑
Slide 140
Slide 140 text
body
{
font-‐family:
sans-‐serif;
}
.raleway-‐loaded
body
{
font-‐family:
Raleway,
sans-‐serif;
}
‑
Slide 141
Slide 141 text
FONT REQUEST
REPAINT
Font
finishes
loading
B
A Font
starts
loading
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/
Slide 171
Slide 171 text
No content
Slide 172
Slide 172 text
No content
Slide 173
Slide 173 text
THERE ARE A LOT OF TOOLS
AT OUR DISPOSAL
TO EASE THE TRANSITION
FROM FALLBACK
TO WEBFONT
Slide 174
Slide 174 text
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