@zachleat@zachleat.com@zachleat

Web Developer,Web Fonts,
Professional Helper

WEB FONTS ARE NOTROCKET@zachleat

SCIENCE1 MITT
2 Invisible@zachleat

UNSTYLED

3 @font-face
4 STRATEGIES📅@zachleat

January2015

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

@zachleat

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

ROCKET SCIENCEAEROSPACE ENGINEERING@zachleat

AERONAUTICALASTRONAUTICAL

1 MITT
2 Invisible@zachleat

UNSTYLED

3 @font-face
4 STRATEGIESFOUFOITT@zachleatINTENTIONALLY LEFT BLANKFOITFlash of@zachleat

INVISIBLE TEXT

@zachleat

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

@zachleat

FOUT

FOUT

FOUT
Flash of@zachleat

unstyled TEXTFOIT@zachleat

DESIGNERS

FOUT

DEVELOPERS

@zachleat

@Font-FACE FOUT
FOIT 3s FOIT ∞19972003 2004

2008 20092011 2012 2013 2014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞2003
19972004

2008 20092011 2012 2013 2014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞2004

1997 2003

2008 20092011 2012 2013 2014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞2008

1997 2003 20042009

2011 2012 2013 2014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞2008

1997 2003 200420092011 2012 2013 2014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞20091997 2003 200420082011 2012 2013 2014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞20091997 2003 200420082011 2012 2013 2014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞1997 2003 200420112008 20092012 2013 2014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞1997 2003 200420122008 20092011

2013 2014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞1997 2003 2004

2008 20092013

2011 20122014 2015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞1997 2003 2004

2008 20092014

2011 2012 20132015 2016

@Font-FACE FOUTFOIT 3s FOIT ∞1997 2003 2004

2008 20092014

2011 2012 20132015 2016

@Font-FACE FOUT
FOIT 3s FOIT ∞1997 2003 2004

2008 20092015

2011 2012 2013 20142016

@Font-FACE FOUT
FOIT 3s FOIT ∞1997 2003 2004

2008 20092016

2011 2012 2013 2014 2015

@Font-FACE FOUT
FOIT 3s FOIT ∞🎉1997 2003 2004

2008 20092011 2012 2013 2014 2015 2016

⏰FOIT@zachleat

0FOUT
1

2

345

@zachleat

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

@zachleat

LIFT COEFFICIENT

1 MITT
2 Invisible@zachleat

UNSTYLED

3 @font-face
4 STRATEGIES

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

RETIRE@zachleat

Bulletproof@font-face

WEB FONTS ARE@zachleat

PROGRESSIVE ENHANCEMENT

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

2 Formats@zachleat

WOFF

WOFF2~30% Smaller*

WOFF
WOFF2
* https://www.w3.org/TR/WOFF20ER/

1 MITT
2 Invisible@zachleat

UNSTYLED

3 @font-face
4 STRATEGIES

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

1
CONGRATULATIONSYOU COMPLETED YOUR FIRSTFONT LOADING STRATEGY@zachleat

Font-displayfont-display: swap;

font-display: swap;

REGULAR LOADED FIRSTITALIC LOADED FIRST@zachleat✅
🛑 Not🛑 Mitt Romney Is OfficiallyRunning for President✅

LEGEND✅ WEB FONT🛑 FALLBACKI ADDED FONT-DISPLAY

BUT MY WEB FONTS@zachleat

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

@zachleat011
🎉
https://twitter.com/zachleat/status/872801603904049153

@zachleat

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

WEB FONT REQUESTSOFTEN DON’T START@zachleatUNTIL FIRST RENDER

2PRELOADPAIRS WITH Font-display

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

ONSF
ING

DOATL

IAP

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

@zachleat

CSS FONT LOADING API

FONTFACEOBSERVER
github.com/bramstein/fontfaceobserver/

NO FOIT 😴

@zachleat

WORKS WITH THIRD PARTY HOSTSONE GROUPED REPAINTREQUIRES 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;}

THE@zachleat

BIG DUMBBOOSTER@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

8 VARIATIONSBEFORE
1.14 MBAFTER
196 KB
AFTER
93 KB
TTF

@zachleat

TTF

WOFF2

> glyphhanger --whitelist="ABCD" --subset=*.ttf> glyphhanger --whitelist="U+41-44" --subset=*.ttf

using pyftsubset:
https://github.com/fonttools/fonttools

@zachleat

SMALLER FONT FILES LOAD FASTERREDUCE FOIT
REDUCE FOUT

VARIABLE@zachleat

FONTS

@zachleat

San Francisco BlackSan Francisco Heavy
San Francisco Bold
San Francisco Semibold
San Francisco Medium
San Francisco Regular
San Francisco LightSan 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

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

SF-Pro-Display-ULTRALIGHT.OTF

One Variable
Font File@zachleat

VARIABLE@zachleat

FONTS

@zachleat

YOU PAY WITH KB

SOURCE SANS PRO

39KB ROMAN
39KB LIGHT
38KB BOLD

SOURCE SANS PRO
VARIABLE

115KB@zachleat

116KB

woff2 SIZES SHOWNVARIABLE FONTS FORCE@zachleat

GROUPED REPAINTS

@zachleat

WEB FONTS MIGHT BE

ROCKET@zachleat

SCIENCECHECkLISTNO INVISIBLE TEXT:* USE FOUT

@zachleat

REFLOW AS LITTLE AS POSSIBLE, AS SOON AS POSSIBLE* FEWER REPAINTS (GROUP THEM)* MAKE FONT FILES SMALLER* TRIGGER DOWNLOAD SOONER

@zachleat

CHECkLIST SOLUTIONSNO INVISIBLE TEXT
FONT-DISPLAY
CSS FoNT LOADING API

TRIGGER DOWNLOAD SOONERPRELOAD

GROUPED REPAINTSCSS FONT LOADING API
VARIABLE FONTS

FONT FILES SMALLERWOFF2SUBSETS

A COMPREHENSIVE GUIDE TO

FONT LOADINGSTRATEGIES@zachleatzachleat.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