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;

  • Helvetica Arial system default

font-family: sans-serif;

  • system default = Helvetica Arial

erif; fault = Helvetica Arial Roboto Liberation Sans

http://fontfamily.io/

font-family: Times, Times New Roman, serif

  • Times Times New Roman system 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

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

  1. SELF HOSTED 2. CLOUD HOSTED

  1. SELF HOSTED 2. CLOUD HOSTED SUBSCRIPTION PERPETUAL PREPAID FREE

  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

  1. PERPETUAL $X Once = Up to Y Pageviews per Month

  1. PREPAID $X, Once = Exactly Y Pageviews

  1. FREE $0 = Unlimited

  1. SELF HOSTED 2. CLOUD HOSTED SUBSCRIPTION PERPETUAL PREPAID FREE

LICENSING IS COMPLICATED

7 № LICENSING COMPLICATES PERFORMANCE

  1. SELF HOSTED 2. CLOUD HOSTED SUBSCRIPTION PERPETUAL PREPAID FREE

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/

  1. WEB STANDARDS

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