A Brief History of that Time You Used Web Fonts

A BRIEF HISTORY of that time YOU USED WEBFONTS

@zachleat zachleat.com

IN THE BEGINNING 4,500,000,000 Years Ago

IN THE BEGINNING 4,500,000,000 Years Ago IN 1995

IN THE BEGINNING 4,500,000,000 Years Ago VERDANA GEORGIA COURIER NEW
TIMES NEW ROMAN IMPACT COMIC SANS MS THERE WAS ARIAL IN 1995

http://acumin.typekit.com/

FAST FORWARD TO TODAY

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

N C T @

N T O F C A F E @ -

56% http://httparchive.org/trends.php OF WEB SITES

http://httparchive.org/trends.php AVERAGE PAYLOAD 105KB

0 350 700 1050 1400 CSS javaScript Images WebFonts TRANSFER
SIZE

REMOVE AN IMAGE! JAVASCRIPT SIZE? WORRIED ABOUT

NOT ALL REQUESTS ARE CREATED EQUAL

PERCEIVED PERFORMANCE

JavaScript

WEB FONT

url('opensans.woff') format('woff'); }

IS 30% SMALLER THAN WOFF On average across all of
Google Fonts: https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/j27Ou4RtvQI/discussion WOFF2

Woff caniuse.com 6 5 7.5 7

62% 38% 4.3 and below 4.4+ WOFF

url('opensans.woff') format('woff'), url('opensans.otf') format('opentype'); }

<!doctype html> <style> @font-‐face { font-‐family: Open
Sans; src: url('opensans.woff2') format('woff2'), url('opensans.woff') format('woff'); } </style>

dAY 0 since last pluralization ERROR

IF NOT USED NOT DOWNLOADED

<p style="font-‐family: Open Sans"> Content. </p>

36+ 23+ 6.1+ 2.3+ 7+ DOWNLOADS WITH <p></p> 28+ 9+
DOWNLOADS WITH <p>Content</p>

RESTRICT TO SPECIFIC CHARACTERS

@font-‐face { font-‐family: Ampersand; src: url('ampersand.woff2')
format('woff2'), url('ampersand.woff') format('woff'); unicode-‐range: U+26; } unicode- range

Needs an _ Ampersand serif p { font-‐family:
Ampersand, serif; }

unicode- range 36 9+ 23 8+ 2.1+ 8+ Supported Supported
with SMART DOWNLOAD NOT SUPPORTED

EXACT MATCH ON Font-Family ✔ @FONT-FACE DOWNLOAD CHECKLIST

EXACT MATCH ON Font-Family USED ON AN ELEMENT IN THE
DOCUMENT ✔ ✔ @FONT-FACE DOWNLOAD CHECKLIST

DOCUMENT ELEMENT HAS CONTENT ✔ ✔ @FONT-FACE DOWNLOAD CHECKLIST ✔

DOCUMENT ELEMENT HAS CONTENT CONTENT IS WITHIN UNICODE-RANGE ✔ ✔ @FONT-FACE DOWNLOAD CHECKLIST ✔ ✔

http://www.w3.org/TR/css3-fonts/ FONT-WEIGHT FONT-STYLE EXACT MATCH

@font-‐face { font-‐family: My Web Font;
font-‐weight: 400; font-‐style: normal; } p { font-‐family: My Web Font; font-‐weight: 400; font-‐style: normal; } ✔

font-‐weight: 600; } p { font-‐family: My Web Font; font-‐weight: 100; } ✘

MisMatch weight 600 Available, 100 assigned, FORCED BOLD p {
font-‐family: My Web Font; font-‐weight: 100; } @font-‐face { font-‐family: My Web Font; font-‐weight: 600; } ✘ ✘ ✔ ✔

MISMATCH STYLE ITALIC AVAILABLE, NORMAL ASSIGNED, FORCED ITALIC p {
font-‐family: My Web Font; font-‐style: normal; } @font-‐face { font-‐family: My Web Font; font-‐style: italic; } ✘ ✘ ✔ ✔

100 200 300 400 500 600 700 800 900 FONT-WEIGHT
<p> ‐ ‐ Normal/Roman Bold @font-‐face ‑

font-‐weight: 500; } p { font-‐family: My Web Font; font-‐weight: 600; } ✘

FAUX BOLD p { font-‐family: My Web Font;
font-‐weight: 600; } @font-‐face { font-‐family: My Web Font; font-‐weight: 500; }

FAUX ITALIC p { font-‐family: My Web Font;
font-‐style: italic; } @font-‐face { font-‐family: My Web Font; font-‐style: normal; }

FONT-SYNTHESIS https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis

http://stateofwebtype.com/

LET’s LOOK at a REAL WORLD EXAMPLE

instagram.com 6 @font-face BLOCKS

.page-‐home .content .home-‐login i { font-‐style: normal;
}

TRIGGER A FONT DOWNLOAD BEHAVIOR WHILE DOWNLOADING

LOCAL FONT { @FONT-FACE {

Flash of Invisible Text F O I T

http://www.webpagetest.org/video/compare.php?tests=141205_VE_STK-r:1-c:0

People will visit a Web site less often if it
is slower than a close competitor by more than 250 milliseconds.” http://www.nytimes.com/2012/03/01/technology/impatient-web-users-ﬂee-slow-loading-sites.html “

https://twitter.com/zoompf/status/578901383253995520

http://www.webpagetest.org/video/compare.php?tests=141209_AY_Z79-r:1-c:0

FONT REQUESTs ARE A SINGLE POINT OF FAILURE

STOP BUTTON HAS NO EFFECT

Flash of UNSTYLED Text F O U T

IS 3 SECONDS A GOOD TIMEOUT?

40% abandon your website before it finishes loading 13 children
are born 10,200,000 Emails are sent

WARNING THE NEXT SLIDE CONTAINS GRAPHIC IMAGERY THAT SOME VIEWERS
MAY FIND DISTURBING

♥ and

ANTI- PATTERNS A N TI-PA TTER N

CSS ONLOAD A N TI-PA TTER N

BLOCKING FONTS.CSS Blocking FONT REQUESTS onload DEFAULT BROWSER BEHAVIOR DANGER
ZONE A N TI-PA TTER N

ASYNC- CSSwith DATA-URIS A N TI-PA TTER N

filamentgroup / loadcss https://github.com/filamentgroup/loadCSS

src: url('data:application/x-‐font-‐ woff;charset=utf-‐8;base64,...') format('woff'); } @font-‐face { font-‐family: My Web Font; src: url('data:application/x-‐font-‐ woff;charset=utf-‐8;base64,...') format('woff'); font-‐weight: 700; } A N TI-PA TTER N

ASYNC FONTS.CSS REPAINT DEFAULT BROWSER BEHAVIOR DANGER ZONE A N
TI-PA TTER N

A N TI-PA TTER N

INLINE DATA URIS WITH MAIN CSS A N TI-PA TTER
N

A N TI-PA TTER N

ONE 50KB CSS REQUEST A N TI-PA TTER N

NOT JUST A PERFORMANCE PROBLEM

https://twitter.com/jmuspratt/status/561239961924403200 Read more: http://zachleat.com/web/mitt-romney-webfont-problem/ A N TI-PA TTER N

USING FONT ICONS A N TI-PA TTER N

A N TI-PA TTER N

https://twitter.com/raganwald/status/452092613529567233 GitHub A N TI-PA TTER N

A N TI-PA TTER N

READ AS x2261 ≡ IDENTICAL TO x2605 ★ BLACK STAR
or STAR x2665 ♥ HEART SUIT ACCESSIBILITY A N TI-PA TTER N

REPLACE YOUR FONT ICONS WITH SVG

EMBRACE MORE FOUT

AT A BARE MINIMUM ADD A TIMEOUT

EVEN BETTER EMBRACE FULL FOUT

font-DISPLAY CSS DESCRIPTOR https://tabatkins.github.io/specs/css-font-display/ from Kenji Baheux, Tab Atkins

@font-‐face { font-‐family: Open Sans; /*
full FOUT */ font-‐display: swap; }

100ms maximum FOIT */ /* Do not repaint after 3s */ font-‐display: fallback; }

100ms maximum FOIT */ /* never FOUT */ /* if not in cache, use fallback */ font-‐display: optional; }

CSS Font Loading http://dev.w3.org/csswg/css-font-loading/

FONTFACEONLOAD github.com/zachleat/fontfaceonload USES THE CSS FONT LOADING API WHEN AVAILABLE.
FONTFACEOBSERVER github.com/bramstein/fontfaceobserver/ INCLUDES A NICE PROMISES POLYFILL

var doc = document, docEl =
doc.documentElement; doc.fonts.load("1em Raleway") .then(function() { // The font has loaded. docEl.className += " raleway-‐loaded"; });

body { font-‐family: sans-‐serif; } .raleway-‐loaded
body { font-‐family: Raleway, sans-‐serif; }

FONT REQUEST DEFAULT BROWSER BEHAVIOR DANGER ZONE REPAINT

FONT REQUEST FORCE FONT LOAD REPAINT

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

FONT REQUESTS REPAINT REPAINT MITT ROMNEY FONT LOADING DANGER ZONE

ONE REPAINT TO RULE THEM ALL

Promise.all([ document.fonts.load("400 1em Raleway"), document.fonts.load("700 1em
Raleway") ]).then(function () { docEl.className += " raleway-‐loaded"; }); ‑ document.fonts.load("1em Raleway").then(function() { docEl.className += " raleway-‐loaded"; }); BECOMES

MITT ROMNEY FONT LOADING DANGER ZONE FONT REQUESTS REPAINT REPAINT

FONT REQUESTS REPAINT REPAINT

FALLBACKS ARE IMPORTANT

fontfamily.io

MINIMIZE THE FALLBACK to WEBFONT REFLOW

font-‐family FALLBACK STYLE font-‐size font-‐size-‐adjust line-‐height

EASE THE TRANSITION FROM FALLBACK TO WEBFONT

THE DEFAULT BROWSER BEHAVIOR FOR FONT-LOADING IS HARMFUL TO CONTENT
ON THE WEB. FONT-LOADING

TAKE THE ROAD LESS TRAVELED

USE A FONT LOADING STRATEGY

@zachleat zachleat.com

A Brief History of that Time You Used Web Fonts

A Brief History of that Time You Used Web Fonts

More Decks by zachleat

Other Decks in Programming

Featured

Transcript