Web Fonts are ▢▢▢ Rocket Science

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

Slide 1

@zachleat @ zachleat

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

Slide 2

@zachleat WEB FONTS ARE NOT SCIENCE ROCKET

Slide 3

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

Slide 4

@zachleat !

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

Slide 5

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

Slide 6

@zachleat ROCKET SCIENCE AEROSPACE ENGINEERING AERONAUTICAL ASTRONAUTICAL

Slide 7

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

Slide 8

@zachleat FOIT FOIT FOU T INTENTIONALLY LEFT BLANK

Slide 9

@zachleat FOIT Flash of INVISIBLE TEXT

Slide 10

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

Slide 11

@zachleat FOUT FOUT

Slide 12

@zachleat FOUT Flash of unstyled TEXT

Slide 13

@zachleat DESIGNERS DEVELOPERS FOIT FOUT

Slide 14

@zachleat

Slide 15

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

Slide 16

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

Slide 17

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

Slide 18

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

Slide 19

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

Slide 20

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

Slide 21

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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

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

Slide 27

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

Slide 28

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

Slide 29

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

Slide 30

@zachleat ⏰ FOIT 0 FOUT 3 4 1 2 5

Slide 31

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

Slide 32

@zachleat LIFT COEFFICIENT

Slide 33

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

Slide 34

@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' ); }

Slide 35

@zachleat RETIRE Bulletproof

@font-face

Slide 36

@zachleat WEB FONTS ARE PROGRESSIVE ENHANCEMENT

Slide 37

@font-face

{

font-family :

Open Sans;

src :

url( 'opensans.woff2' )

format('woff2'),

     url(

'opensans.woff' )

format('woff'); }

Slide 38

@zachleat 2

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

Slide 39

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

Slide 40

@zachleat

Slide 41

@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;

}

Slide 42

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

Slide 43

@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;

}

Slide 44

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

Slide 45

@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 %

Slide 46

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

Slide 47

@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

Slide 48

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

Slide 49

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

Slide 50

@zachleat WEB FONT REQUESTS OFTEN DON’T START UNTIL

FIRST RENDER

Slide 51

PRELOAD PAIRS WITH Font-display 2

Slide 52

<head>  <link

rel

"preload"

href

"opensans.woff2"

as

"font"

type

"font/woff2"

crossorigin

Slide 53

FOUT WITH CLASS 3

Slide 54

@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 ;

}

Slide 55

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

Slide 56

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

Slide 57

@zachleat NO FOIT '

WORKS WITH THIRD PARTY HOSTS ONE GROUPED REPAINT

REQUIRES METICULOUS SCRUTINY OF font-family use

Slide 58

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

Slide 59

body

{

font-family :

Lato,

sans-serif;

}

/********** is processed into **********/ body

{

font-family :

sans-serif;

}

.fonts-loaded body

{

font-family :

Lato;

}

Slide 60

@zachleat BIG DUMB BOOSTER THE

Slide 61

@zachleat SUBSET EVERYTHING * * Internationalization and LICENSING REQUIREMENTS

Slide 62

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

Slide 63

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

Slide 64

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{|}~»– —’“” ★ ➡ �

Slide 65

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

Slide 66

Slide 67

Slide 68

@zachleat 8 VARIATIONS BEFORE TTF

AFTER TTF

AFTER WOFF2 1.14 MB 196 KB 93 KB

Slide 69

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

Slide 70

@zachleat SMALLER FONT FILES LOAD FASTER REDUCE FOIT REDUCE FOUT

Slide 71

@zachleat VARIABLE FONTS

Slide 72

@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

Slide 73

@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