A presentation at Beyond Tellerand in in Düsseldorf, Germany by Zach Leatherman
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 Wilbur Scoville
SCOVILLE HEAT UNITS
S H U
0SHU
10 SHU
100 SHU
1.000 SHU
10.000 SHU
100.000 SHU
100.000+ SHU
0 SHU THE BELL PEPPER
it’s GIF not GIF
1 № it’s WEB FONT not WEBFONT
THE BANANA PEPPER
! 500 Scoville Heat Units
2 № WEBFONTS ARE GOOD YOU SHOULD USE WEBFONTS
2 № WEB FONTS ARE GOOD YOU SHOULD USE WEB FONTS
Using system fonts means no added “ download time, no extra data used, and a look designed to blend it with the device you’re using.” April 2018
“
TYPE IS HOW WE DRESS OUR CONTENT
font-family: Helvetica
font-family: Arial
font-family: Papyrus
I LOVE TYPE
I LOVE TYPE
LOVE TYP
g
g
ag DOUBLE-STORY SINGLE-STORY
a DOUBLE-STORY g SINGLE-STORY
PERFORMANCE BUDGETS
LESS IS MORE
TRADE BYTES FOR FEATURES
Chrome Developer Tools WEB FONT SEARCH
@font-face Found 19 matching lines in 5 files.
TABASCO SAUCE
! 2000 Scoville Heat Units 2 Kiloscovilles 1,95 Kibiscovilles
3 № YOUR WEB-FONT FALLBACK STACK IS TOO COMPLEX
font-family: Helvetica, Arial, sans-serif;
font-family: sans-serif;
erif; fault = Helvetica Arial Roboto Liberation Sans
http://fontfamily.io/
font-family: Times, Times New Roman, serif
font-family: serif
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
D E AG UR CO DIS @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’); }
G NIN R 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 and web fonts in @font-face rules. Assuming two fonts are identical because they share 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; }
T T
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 SUBSETTING VISIBLEINTERMEDIATE TEXT FONT-SYNTHESIS FILE COMPRESSION 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
LICENSING IS COMPLICATED
7 № LICENSING COMPLICATES PERFORMANCE
TRACKERS, TRACK
TRACKERS, TRACK PAGEVIEWS UNIQUE 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 0xe001 0xe002 0xe003
https://twitter.com/ckollars/status/1026824074696249346
https://twitter.com/ckollars/status/1026824074696249346
https://github.blog/2016-02-22-delivering-octicons-with-svg/
RENDERING ACCESSIBILITY FALLBACKS 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/
RN TTE PA TI- AN @font-face { /* Bad for icon fonts, don’t use this */ } font-display: swap;
RN TTE PA 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;
TG NO AT RE @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 QUESTION THAT NEEDS MORE CONTEXT.
CONTENT HOSTING PROJECT TRAFFIC LONGEVITY BUDGET PAIN TOLERANCE EXPERTISE USERS PERFORMANCE REQUIREMENTS
THE BEST WEB FONT HOST FOR ME IS…
9 № SELF HOSTING
Find one that let’s you self host without a slow tracker.
Find one that let’s you self host without a sloww tracker.
Find one that let’s you self host without a slowww tracker.
Find one that let’s you self host without a slowwww tracker.
Find one that let’s you self host without a slowwwww tracker.
Find one that let’s you self host without a slowwwwww 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 7 8 font-display
2 3 4 5 7 8 preload
2 3 4 5 7 8 WOFF2
2 3 4 5 6 7 8 unicode-range
2 3 4 5 6 7 8 Variable Fonts
1 2 3 4 5 6 7 8 Default Visible Text
1 2 3 4 5 6 7 8 Color Fonts Open Type in SVG
1 2 3 4 5 6 7 8 CSS Font Loading API
1 2 3 4 5 6 7 8 DEVELOPER TOOLS Bonus
1 2 3 4 5 6 7 8
RIGHT NOW https://zachleat.com/web/scoville-scale/#bwb 10 FOR WEB FONTS № THE BEST WEB BROWSERS
‘
1 2 3 4 5 6 7 8 ‘-NORMALIZED FEATURE SUPPORT
1 2 3 4 5 ‘-NORMALIZED 6 FEATURE SUPPORT 7 8
3 8 4 5 2 7 1 6 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 OPINIONS THANK YOU @zachleat @zachleat.com
INSPIRED BY
Fonts on the web have a long, storied, and sometimes problematic history for not just web site designers and developers, but typographers, type foundries, and web font hosts too. We all want type to solve real problems but what happens our typographic opinions are in conflict—who takes priority? In this talk we’ll analyse a few of these spicy opinions, rank a few hot takes on the Scoville Scale, and learn how we can improve real-world experiences when using fonts on the web.
for free. You
can too.