THE SCOVILLE SCALE

OF WEB FONT LOADING OPINIONS

THE SCOVILLE SCALE

OF WEB FONT LOADING OPINIONS

@zachleat@zachleat.com@Web Craftspersonhttps://www.deviantart.com/packrobottom/art/Starbucks-388727959

WilburScovilleSCOVILLE HEAT UNITS

SHU

0SHU

10SHU

100SHU

1.000SHU

10.000
SHU

100.000
SHU

100.000+SHU

0 SHUTHE

BELL PEPPER

it’s GIF
not GIF1№

it’s WEB FONT
not WEBFONT

THEBANANA PEPPER!
500 Scoville Heat Units

2№WEBFONTS ARE GOOD
YOU SHOULD USE WEBFONTS

2№WEB FONTS ARE GOOD
YOU SHOULD USE WEB FONTS

Usingsystem
fonts
means
noadded“download time, no extra data used, anda look designed to blend it with thedevice you’re using.”

April 2018

#"

TYPE IS HOW WEDRESS OUR CONTENT

font-family: Helvetica

font-family: Arialfont-family: Papyrus

I LOVE TYPEI LOVE TYPE

LOVE TYP

g

g

ag
DOUBLE-STORYSINGLE-STORYa
DOUBLE-STORYg
SINGLE-STORYPERFORMANCEBUDGETSLESS IS MORE

TRADE BYTESFOR FEATURES

Chrome Developer Tools

WEB FONT SEARCH

@font-faceFound 19 matching lines in 5 files.

TABASCO SAUCE!
2000 Scoville Heat Units
2 Kiloscovilles
1,95 Kibiscovilles

3№

YOUR WEB-FONT FALLBACK STACK ISTOO COMPLEX

font-family: Helvetica, Arial, sans-serif;*Helvetica

Arial

system defaultfont-family: sans-serif;*
system default =Helvetica Arialerif;

fault =

Helvetica Arial

RobotoLiberationSanshttp://fontfamily.io/font-family: Times, Times New Roman, serif*TimesTimes New Romansystem defaultfont-family: serif*
system default =Times

Times New Romanult =Times

Times New Roman

Noto Serif

Liberation
SerifMINIFIERS THAT DON’T DO THIS

CSSO
…

…

THE

JALAPEÑO

!
5750 Scoville Heat Units
5,75 Kiloscovilles
5,61 Kibiscovilles

4№

BULLETPROOF FONT FACE

IS DEAD

$ont

FACE

DE
AG
UR

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

OD

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

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

“ Never mix locally installed fonts andweb fonts in @font-face rules. Assuming two fonts are identical because theyshare a name is a recipe for disaster.”
https://bramstein.com/writing/web-font-anti-patterns-local-fonts.htmloogle

Foogle Gonts

Firefox Developer Tools

FONTS TAB

4½№

FONTS ARE SOFTWARE

THEY NEED MAINTENANCE & UPDATES TOO

THE

CHIPOTLE!
6500 Scoville Heat Units
6,5 Kiloscovilles
6,34 Kibiscovilles

VISIBLE TEXT IS
MORE READABLE

THAN INVISIBLE TEXTVISIBLE TEXT IS
MORE READABLE

THAN INVISIBLE TEXTVISIBLE TEXT IS
MORE READABLE

THAN INVISIBLE TEXTVISIBLE TEXT IS
MORE READABLE

THAN INVISIBLE TEXTVISIBLE TEXT IS
MORE READABLE

THAN INVISIBLE TEXT5№

VISIBLE TEXT IS
MORE READABLE

THAN INVISIBLE TEXTVISIBLE TEXT IS
MORE READABLE

THAN INVISIBLE TEXT

@zachleat

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

@font-face {font-display: swap;}

TTfont-family: ambroise-francois-std,"Bodoni 72",
Didot,"Hoefler Text",
serif;

THE

CAYENNE PEPPER!
40.000 Scoville Heat Units
40 Kiloscovilles
39,06 Kibiscovilles

THE REAL CRITERIA TO

EVALUATE WEB FONT LOADING:PRELOAD PRECONNECT VARIABLE
GROUPED REPAINTS FONTS
SUBSETTINGVISIBLEINTERMEDIATETEXT FONT-SYNTHESISFILECOMPRESSION TWO STAGE LOAD
INCREMENTAL TRANSFER6№REAL ITALICS

6№

REAL ITALICS

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

@font-face {font-family: Lato;
src: url('Lato-Regular.woff2') format('woff2'),
url('Lato-Regular.woff') format('woff');}@font-face {font-family: Lato;
src: url('Lato-Italic.woff2') format('woff2'),
url('Lato-Italic.woff') format('woff');
font-style: italic;}%https://pdx.ashur.cab/

https://pdx.ashur.cab/

THE

HABANERO!
225.000

Scoville Heat Units

225 Kiloscovilles
219,72 Kibiscovilles

IANALLICENSING

1. SELF HOSTED
2. CLOUD HOSTED

1. SELF HOSTED
2. CLOUD HOSTEDSUBSCRIPTIONPERPETUALPREPAIDFREE

1. SUBSCRIPTION$X per month = Up to Y Pageviews per Month$X per month = Up to Y Unique visitors per Month$X per month = Unlimited

2. PERPETUAL$X Once = Up to Y Pageviews per Month3. PREPAID$X, Once = Exactly Y Pageviews4. FREE$0 = Unlimited

1. SELF HOSTED
2. CLOUD HOSTEDSUBSCRIPTIONPERPETUALPREPAID
FREE

LICENSING ISCOMPLICATED

7№

LICENSINGCOMPLICATESPERFORMANCE1. SELF HOSTED
2. CLOUD HOSTEDSUBSCRIPTIONPERPETUALPREPAIDFREETRACKERS, TRACKTRACKERS, TRACKPAGEVIEWSUNIQUE VISITORSYourFontsWebFontsKit.css@import url("//hello.yourfonts.net/count/UNIQUE-ID");@font-face {/* … */}@font-face {/* … */}572ms on Fast 3G&TRACKERS

568ms on Fast 3G&TRACKERSWe can do better.

https://djr.com/

THE

TRINIDAD SCORPION

1.463.700

Scoville Heat Units

1,46 Megascovilles
1,395 Mebiscovilles

8№

ICON FONTS:
PLEASE STOP⃞PRIVATE
USE AREA ICON FONT
0xe0010xe0020xe003https://twitter.com/ckollars/status/1026824074696249346

https://twitter.com/ckollars/status/1026824074696249346

https://github.blog/2016-02-22-delivering-octicons-with-svg/

1. RENDERING
2. ACCESSIBILITY
3. FALLBACKS
4. AUTHORING

https://cloudfour.com/thinks/seriously-dont-use-icon-fonts/

https://speakerdeck.com/ninjanails/death-to-icon-fonts

https://www.sarasoueidan.com/blog/icon-fonts-to-svg/

https://css-tricks.com/icon-fonts-vs-svg/

5. WEB STANDARDSRNTTE
PATI-AN@font-face {/* Bad for icon fonts, don’t use this */}font-display: swap;

RNTTEPA

TI-AN@font-face {/* Bad for icon fonts, don’t use this */}font-display: optional;

RN

TTE
PA

TI-AN

@font-face {/* Bad for icon fonts, don’t use this */}font-display: fallback;TGNOATRE@font-face {/* The least worst option for icon fonts */}font-display: block;https://font-display.glitch.me/

THE

CAROLINA REAPER

1.569.300

Scoville Heat Units

1,56 Megascovilles
1,49 Mebiscovilles

THE BEST WEB
FONT HOST IS…

…A QUESTIONTHAT NEEDS
MORE CONTEXT.

CONTENT HOSTINGPROJECT
TRAFFICLONGEVITY
BUDGETPAIN
TOLERANCEEXPERTISEUSERSPERFORMANCE REQUIREMENTS

THE BEST WEB
FONT HOST FOR
ME IS…

9№

SELF HOSTING

Find one that let’s you
self host without aslow tracker.

Find one that let’s you
self host without asloww tracker.

Find one that let’s you
self host without aslowww tracker.

Find one that let’s you
self host without aslowwww tracker.

Find one that let’s you
self host without aslowwwww tracker.

Find one that let’s you
self host without aslowwwwww tracker.

THE

DRAGON’S BREATH2.480.000

Scoville Heat Units

2,48 Megascovilles
2,365 Mebiscovilles

https://html5test.com/

#HOTDRAMA

#HOTDRAMA

#HOTDRAMA

THE BEST WEB
BROWSER FOR
WEB FONTS IS…

3

4

5

78

font-display

2

34578

preload234578

WOFF2

234

5678

unicode-range

2345678Variable Fonts

12345678Default
Visible Text

12345678Color Fonts
Open Type in SVG

12345678CSS FontLoading API

12345678DEVELOPERTOOLSBonus12345678

RIGHT NOW

https://zachleat.com/web/scoville-scale/#bwb

10FOR WEB FONTS№THE
BEST WEB BROWSERS'12345678'-NORMALIZEDFEATURE SUPPORT12345'-NORMALIZED6FEATURE SUPPORT

7838452716
https://zachleat.com/web/scoville-scale/#bwb

OVER TIME

https://zachleat.com/web/scoville-scale/#bwb

10

FOR WEB FONTS№THE
BEST WEB BROWSERTypographers
Foundries
License Authors
Hosting Providers

Web Browsers
Web Developers
Web Designers

THE SCOVILLE SCALE

OF WEB FONT LOADING OPINIONSTHANK YOU@zachleat@zachleat.com

INSPIRED BY