Web Fonts are ▢▢▢ Rocket Science

A presentation at Concatenate in August 2018 in Lagos, Nigeria by Zach Leatherman

@zachleat @ zachleat
@ zachleat.com We b D e ve l o p e r, We b Fo n t s, Professional Helper

@zachleat WEB FONTS ARE NOT SCIENCE ROCKET

@zachleat MITT Invisible UNSTYLED 1 @font-face STRATEGIES 2 3 4

@zachleat !
January 2015 By Gage Skidmore, CC BY-SA 3.0 https://commons.wikimedia.org/w/index.php?curid=25133611

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

@zachleat ROCKET SCIENCE AEROSPACE ENGINEERING AERONAUTICAL ASTRONAUTICAL

@zachleat MITT Invisible UNSTYLED 1 @font-face STRATEGIES 2 3 4

@zachleat FOIT FOIT FOU T INTENTIONALLY LEFT BLANK

@zachleat FOIT Flash of INVISIBLE TEXT

@zachleat https://twitter.com/aanand/status/465182499577286656

@zachleat FOUT FOUT

@zachleat FOUT Flash of unstyled TEXT

@zachleat DESIGNERS DEVELOPERS FOIT FOUT

@zachleat

FOUT @Font-FACE FOIT 3s FOIT ∞ 1997 2016 2014 2008 2009 2011 2012 2013 2004 2003 2015

FOUT @Font-FACE FOIT 3s FOIT ∞ 2016 2014 2008 2009 2011 2012 2013 2004 2015 1997 2003

FOUT @Font-FACE FOIT 3s FOIT ∞ 2016 2014 2008 2009 2011 2012 2013 2003 2015 1997 2004

FOUT @Font-FACE FOIT 3s FOIT ∞ 2016 2014 2009 2011 2012 2013 2004 2003 2015 1997 2008

FOUT @Font-FACE FOIT 3s FOIT ∞ 2016 2014 2009 2011 2012 2013 2004 2003 2015 1997 2008

FOUT @Font-FACE FOIT 3s FOIT ∞ 2009 2016 2014 2008 2011 2012 2013 2004 2003 2015 1997

FOUT @Font-FACE FOIT 3s FOIT ∞ 2009 2016 2014 2008 2011 2012 2013 2004 2003 2015 1997

FOUT @Font-FACE FOIT 3s FOIT ∞ 2011 2016 2014 2008 2009 2012 2013 2004 2003 2015 1997

FOUT @Font-FACE FOIT 3s FOIT ∞ 2012 2016 2014 2008 2009 2011 2013 2004 2003 2015 1997

FOUT @Font-FACE FOIT 3s FOIT ∞ 2013 2016 2014 2008 2009 2011 2012 2004 2003 2015 1997

FOUT @Font-FACE FOIT 3s FOIT ∞ 2014 2016 2008 2009 2011 2012 2013 2004 2003 2015 1997

FOUT @Font-FACE FOIT 3s FOIT ∞ 2016 2008 2009 2011 2012 2013 2004 2003 2015 1997 2014

FOUT @Font-FACE FOIT 3s FOIT ∞ 2015 2016 2014 2008 2009 2011 2012 2013 2004 2003 1997

FOUT @Font-FACE FOIT 3s FOIT ∞ 2016 2014 2008 2009 2011 2012 2013 2004 2003 2015 1997

FOUT @Font-FACE FOIT 3s FOIT ∞ 2016 2014 2008 2009 2011 2012 2013 2004 2003 2015 1997 "

@zachleat ⏰ FOIT 0 FOUT 3 4 1 2 5

@zachleat https://zachleat.com/foitfout/ FOIT FOUT Comparison

@zachleat LIFT COEFFICIENT

@zachleat Invisible UNSTYLED 1 @font-face STRATEGIES 2 3 4 MITT

@font-face
{
font-family :
Open Sans;
src :
url( 'opensans.eot' );
src :
url( 'opensans.eot?#iefix' )
format( 'embedded-opentype' ), url( 'opensans.woff' )
format( 'woff' ), url( 'opensans.ttf' )
format( 'truetype' ), url( 'opensans.svg#svgFontName' )
format( 'svg' ); }

@zachleat RETIRE Bulletproof
@font-face

@zachleat WEB FONTS ARE PROGRESSIVE ENHANCEMENT

@font-face
{
font-family :
Open Sans;
src :
url( 'opensans.woff2' )
format('woff2'),
url(
'opensans.woff' )
format('woff'); }

@zachleat 2
Formats WOFF WOFF2 ~30% Smaller* * https://www.w3.org/TR/WOFF20ER/ WOFF WOFF2

@zachleat Invisible UNSTYLED 1 @font-face STRATEGIES 2 3 4 MITT

@zachleat

@font-face
{
font-family :
Titling Gothic;
src :
url( 'tgothic.woff2' )
format('woff2'),
url(
'tgothic.woff' )
format('woff'); } @font-face
{
font-family :
Titling Gothic;
src :
url( 'tgothic-italic.woff2' )
format('woff2'),
url( 'tgothic-italic.woff' )
format('woff');
font-style :
italic;
}

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

@font-face
{
font-family :
Titling Gothic;
src :
url( 'tgothic.woff2' )
format('woff2'),
url(
'tgothic.woff' )
format('woff');
font-display :
swap;
} @font-face
{
font-family :
Titling Gothic;
src :
url( 'tgothic-italic.woff2' )
format('woff2'),
url( 'tgothic-italic.woff' )
format('woff');
font-style :
italic;
font-display :
swap;
}

@zachleat YOU COMPLETED YOUR FIRST FONT LOADING STRATEGY CONGRATULATIONS Font-display 1

@zachleat Running for President Mitt Romney Is Officially Not font-display: swap; ITALIC LOADED FIRST font-display: swap; REGULAR LOADED FIRST ✅ ✅ % % ✅ LEGEND WEB FONT FALLBACK %

@zachleat I ADDED FONT-DISPLAY BUT MY WEB FONTS & STILL SEEM SLOW

@zachleat DOWNLOAD CHECKLIST CSS PARSED, @Font-FACE FOUND A NODE IN THE DOCUMENT: ✔ ✔
MATCH ON Font-Family
HAS TEXT CONTENT
UNICODE-RANGE Matches TEXT CONTENT

@zachleat https://twitter.com/zachleat/status/872801603904049153 " 110

@zachleat https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization

@zachleat WEB FONT REQUESTS OFTEN DON’T START UNTIL
FIRST RENDER

PRELOAD PAIRS WITH Font-display 2

<head>  <link
rel
"preload"
href
"opensans.woff2"
as
"font"
type
"font/woff2"
crossorigin

FOUT WITH CLASS 3

@font-face
{
font-family :
Lato;
src :
url( 'lato.woff2' )
format( 'woff2' ),
url(
'lato.woff' )
format( 'woff' );
} @font-face
{
font-family :
Lato;
src :
url( 'lato-bold.woff2' )
format( 'woff2' ),
url(
'lato-bold.woff' )
format( 'woff' );
font-weight :
700 ;
}

Promise. all ([
document.fonts. load ( "1em Lato" ),
document.fonts. load ( "700 1em Lato" )
]). then ( function
() { var docEl = document.documentElement;
docEl.classList.add( "fonts-loaded" );
}); body
{
font-family :
sans-serif;
}
.fonts-loaded body
{
font-family :
Lato,
sans-serif;
}
CSS FONT LOADING API

@zachleat CSS FONT LOADING API FONTFACEOBSERVER github.com/bramstein/fontfaceobserver/

@zachleat NO FOIT '
WORKS WITH THIRD PARTY HOSTS ONE GROUPED REPAINT
REQUIRES METICULOUS SCRUTINY OF font-family use

postcss-foft-classes https://github.com/zachleat/postcss-foft-classes based on: https://github.com/netlify/postcss-fout-with-a-class

body
{
font-family :
Lato,
sans-serif;
}
/********** is processed into **********/ body
{
font-family :
sans-serif;
}
.fonts-loaded body
{
font-family :
Lato;
}

@zachleat BIG DUMB BOOSTER THE

@zachleat SUBSET EVERYTHING * * Internationalization and LICENSING REQUIREMENTS

Glyphhanger https://github.com/filamentgroup/glyphhanger

glyphhanger https://zachleat.com/
U+20-7E,U+BB,U+2013,U+2014,U+2019,U +201C,U+201D,U+2605,U+27A1,U+1F525

glyphhanger https://zachleat.com/
U+20-7E,U+BB,U+2013,U+2014,U+2019,U +201C,U+201D,U+2605,U+27A1,U+1F525 !"#$%&'()*+,-./0123456789:;<=>? @ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abc defghijklmnopqrstuvwxyz{|}~»– —’“” ★ ➡ �

glyphhanger https://zachleat.com/ --subset=*.ttf using pyftsubset: https://github.com/fonttools/fonttools

@zachleat 8 VARIATIONS BEFORE TTF
AFTER TTF
AFTER WOFF2 1.14 MB 196 KB 93 KB

glyphhanger --whitelist="ABCD" --subset=.ttf glyphhanger --whitelist="U+41-44" --subset=.ttf using pyftsubset: https://github.com/fonttools/fonttools

@zachleat SMALLER FONT FILES LOAD FASTER REDUCE FOIT REDUCE FOUT

@zachleat VARIABLE FONTS

@zachleat San Francisco Black San Francisco Heavy San Francisco Bold San Francisco Semibold San Francisco Medium San Francisco Regular San Francisco Light San Francisco Ultralight SF-Pro-Display-Black.OTF SF-Pro-Display-Heavy.OTF SF-Pro-Display-Bold.OTF SF-Pro-Display-Semibold.OTF SF-Pro-Display-Medium.OTF SF-Pro-Display-Regular.OTF SF-Pro-Display-LIGHT.OTF SF-Pro-Display-ULTRALIGHT.OTF

@zachleat SF-Pro-Display-Black.OTF SF-Pro-Display-Heavy.OTF SF-Pro-Display-Bold.OTF SF-Pro-Display-Semibold.OTF SF-Pro-Display-Medium.OTF SF-Pro-Display-Regular.OTF SF-Pro-Display-LIGHT.OTF SF-Pro-Display-ULTRALIGHT.OTF One Variable Font File

@zachleat

@zachleat VARIABLE FONTS

@zachleat YOU PAY WITH KB

@zachleat SOURCE SANS PRO SOURCE SANS PRO VARIABLE 115 KB 39 KB
ROMAN
39 KB
LIGHT
38 KB
BOLD
116 KB
woff2 SIZES SHOWN

@zachleat VARIABLE FONTS FORCE GROUPED REPAINTS

@zachleat

@zachleat WEB FONTS MIGHT BE SCIENCE ROCKET

@zachleat NO INVISIBLE TEXT:
USE FOUT
REFLOW AS LITTLE AS POSSIBLE, AS SOON AS POSSIBLE
FEWER
REPAINTS (GROUP THEM)
MAKE FONT FILES SMALLER CHECkLIST
TRIGGER DOWNLOAD SOONER

@zachleat NO INVISIBLE TEXT FONT-DISPLAY
CSS FoNT LOADING API
GROUPED REPAINTS CSS FONT LOADING API
VARIABLE FONTS CHECkLIST SOLUTIONS TRIGGER DOWNLOAD SOONER PRELOAD
FONT FILES SMALLER WOFF2
SUBSETS

@zachleat A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES zachleat.com/web/comprehensive-webfonts/

WEB FONT LOADING RECIPES https://github.com/zachleat/web-font-loading-recipes

@zachleat INSPIRED BY

@zachleat THANK YOU @ zachleat
@ zachleat.com

Zach Leatherman
@zachleat

1 / 86

(This is the 25 minute version of this talk)

Web fonts can be tricky—but are they rocket science? Web browsers have decided to make them invisible while they’re loading to avoid rendering system fonts to users. In order to properly manage the performance of our web fonts, we respectfully disagree with that decision. Roll up the sleeves on your lab coat, y’all.

In this talk, we discuss practical ways to stabilize the four main pillars of proper font loading:

Avoiding invisible text.
Triggering downloads sooner.
Grouping repaints to reduce reflow.
If you make font files smaller, they load faster.

Buzz and feedback

Here’s what was said about this presentation on social media.

Just finished speaking at #ConcatenateConf! Thank you to everyone—especially the @ConcatenateConf organizers. Hello to everyone in Nigeria from rural USA ♥️

At times like these I remember why I love the web. pic.twitter.com/BpyRt7mWHN
— Zach Leatherman (@zachleat) August 10, 2018