@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