The Performance and
Usability of Font Loading
Zach Leatherman
@zachleat
Slide 2
Slide 2 text
N T
O
F C
A
F E
@ -
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
THE DEFAULT
BROWSER BEHAVIOR
FOR FONT-LOADING
IS HARMFUL TO BOTH
THE PERCEIVED PERFORMANCE
AND INTEGRITY OF
CONTENT ON THE WEB.
Slide 5
Slide 5 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 6
Slide 6 text
@zachleat
zachleat.com
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
47%
http://httparchive.org/trends.php?s=Top1000
of the top 1000
Slide 9
Slide 9 text
http://httparchive.org/trends.php?s=Top1000
AVERAGE PAYLOAD
97KB
A
G
EN
D
A
TRIGGER A FONT DOWNLOAD
BEHAVIOR WHILE DOWNLOADING
1.
2.
Slide 23
Slide 23 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 24
Slide 24 text
WOFF2
WOFF
OTF
SVG
Slide 25
Slide 25 text
WOFF2
WOFF
OTF
SVG
Slide 26
Slide 26 text
WOFF2
WOFF
OTF
SVG
T
Slide 27
Slide 27 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 28
Slide 28 text
@font-‐face
{
font-‐family:
My
Web
Font;
src:
url('icanfont.woff2')
format('woff2'),
url('icanfont.woff')
format('woff'),
url('icanfont.otf')
format('opentype');
}
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
dAY
since last
pluralization ERROR
1
Slide 32
Slide 32 text
dAY
0
since last
pluralization ERROR
Slide 33
Slide 33 text
IF NOT USED,
NOT DOWNLOADED
Slide 34
Slide 34 text
9+
Slide 35
Slide 35 text
Needs
Content.
Slide 36
Slide 36 text
8
36–42
23–28
6.1–8
2.3, 4.1
7–8
DOWNLOADS WITH
EMPTY
ATTACHED ELEMENT
DOWNLOADS
EVERY TIME
DOWNLOADS WITH
NON-EMPTY
ATTACHED ELEMENT
28–37
9–11
Slide 37
Slide 37 text
8
36–42
23–28
6.1–8
2.3, 4.1
7–8
DOWNLOADS WITH
EMPTY
ATTACHED ELEMENT
DOWNLOADS
EVERY TIME
DOWNLOADS WITH
NON-EMPTY
ATTACHED ELEMENT
28–37
9–11
Slide 38
Slide 38 text
RESTRICT TO
SPECIFIC
CHARACTERS
Slide 39
Slide 39 text
unicode-
range
Slide 40
Slide 40 text
BASIC
LATIN
CODE
POINTS Arial Chunk Five
x26 & &
x41 A A
x42 B B
x43 C C
x2B + +
x3F ? ?
unicode-
range
36
9, 10, 11
23
8
4.1
8
ALWAYS DOWNLOADS SMART DOWNLOAD
NOT SUPPORTED
Slide 47
Slide 47 text
unicode-
range
36
9, 10, 11
23
8
4.1
8
ALWAYS DOWNLOADS SMART DOWNLOAD
NOT SUPPORTED
Slide 48
Slide 48 text
USED IN DOCUMENT CONTENT
FONT-WEIGHT
FONT-STYLE
Images courtesy of http://www.w3.org/TR/css3-fonts/
Slide 49
Slide 49 text
USED IN DOCUMENT CONTENT
FONT-WEIGHT
FONT-STYLE
✔
Images courtesy of http://www.w3.org/TR/css3-fonts/
Slide 50
Slide 50 text
@font-‐face
{
font-‐family:
My
Web
Font;
src:
url('icanfont.woff2')
format('woff2'),
url('icanfont.woff')
format('woff'),
url('icanfont.otf')
format('opentype');
font-‐weight:
400;
font-‐style:
normal;
}
Slide 51
Slide 51 text
p
{
font-‐family:
My
Web
Font;
font-‐weight:
400;
font-‐style:
normal;
}
Roman
Text
Slide 52
Slide 52 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 53
Slide 53 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 58
Slide 58 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 62
Slide 62 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 162
Slide 162 text
font-rendering CSS PROPERTY
https://github.com/KenjiBaheux/css-font-rendering
from Kenji Baheux, Ilya Grigorik, David Kuettel, Tab Atkins
Slide 163
Slide 163 text
CSS Font Loading
http://dev.w3.org/csswg/css-font-loading/
Slide 164
Slide 164 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 165
Slide 165 text
0 SECOND
TIMEOUT
FOUT
Slide 166
Slide 166 text
var
doc
=
document,
docEl
=
doc.documentElement;
doc.fonts.load("1em
Raleway")
.then(function()
{
//
The
font
has
loaded.
docEl.className
+=
"
raleway-‐loaded";
});
‑
Slide 167
Slide 167 text
body
{
font-‐family:
sans-‐serif;
}
.raleway-‐loaded
body
{
font-‐family:
Raleway,
sans-‐serif;
}
‑
Slide 168
Slide 168 text
No content
Slide 169
Slide 169 text
FONT REQUEST
Slide 170
Slide 170 text
FONT REQUEST
A Font
starts
loading
Slide 171
Slide 171 text
FONT REQUEST
Font
finishes
loading
B
A Font
starts
loading
Slide 172
Slide 172 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 205
Slide 205 text
THERE ARE A LOT OF TOOLS
AT OUR DISPOSAL
TO EASE THE TRANSITION
FROM FALLBACK
TO WEBFONT
Slide 206
Slide 206 text
No content
Slide 207
Slide 207 text
THE DEFAULT
BROWSER BEHAVIOR
FOR FONT-LOADING
IS HARMFUL TO BOTH
THE PERCEIVED PERFORMANCE
AND INTEGRITY OF
CONTENT ON THE WEB.
Slide 208
Slide 208 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