Web Fonts as a Progressive Enhancement, Ampersand 2013

AS PROGRESSIVE ENHANCEMENT @andyhume Ampersand, 2013 WEB FONTS Sunday, December
29, 13

What’s this? Sunday, December 29, 13

This is... an outage Sunday, December 29, 13

This is... downtime Sunday, December 29, 13

This is... lost page views Sunday, December 29, 13

This is... lost revenue Sunday, December 29, 13

Thank-you! Creative Commons Licensed Attribution, Non-Commercial, Share Alike cc http://lanyrd.com/sckmwb
@andyhume Sunday, December 29, 13

Meaning is the baseline. Design is an enhancement. Paul Lloyd
https://speakerdeck.com/paulrobertlloyd/the-edge-of-the-web Sunday, December 29, 13

Meaning is the baseline Sunday, December 29, 13

http://www.flickr.com/photos/the_jorr/325224175/ Unreliable Sunday, December 29, 13

http://www.flickr.com/photos/vpickering/6824364286/ Resilient Sunday, December 29, 13

Progressive enhancement So, the conclusion is that this is the
best way to deal with this. Yay us. Next, how do we do that. http://www.flickr.com/photos/8040811@N06/3167877765 Progressive enhancement Sunday, December 29, 13

HTML CSS The path to render START RENDER Sunday, December
29, 13

HTML CSS The path to render FONT FONT FONT START
RENDER Sunday, December 29, 13

HTML CSS The path to render FONT FONT FONT START
RENDER TEXT RENDER Sunday, December 29, 13

What causes this? FALLBACK BLOCKING BLOCKING + TIMEOUT Internet Explorer
Safari Mobile Safari Chrome Opera (Blink) Firefox Opera (Presto) Sunday, December 29, 13

http://www.flickr.com/photos/droetker0912/5542920908/ A solution Sunday, December 29, 13

Web font loader Provide control over font loading Remove fonts
from the critical path Make cross-browser behaviour consistent Sunday, December 29, 13

Web font loader <link href="/myfonts.css" rel="stylesheet" /> Sunday, December 29,
13

Web font loader <link href="/myfonts.css" rel="stylesheet" /> var WebFontConfig =
{ custom: { families: ['Clarendon', 'Clarendon Bold'], urls: ['/myfonts.css'] } }; Sunday, December 29, 13

Web font loader <link href="/myfonts.css" rel="stylesheet" /> var WebFontConfig =
{ custom: { families: ['Clarendon', 'Clarendon Bold'], urls: ['/myfonts.css'] } }; var s = document.createElement('script'); s.src = '//ajax.googleapis.com/webfonts.js'; document.head.appendChild(s); Sunday, December 29, 13

Web font loader <body class="clarendon-loading"> <body class="clarendon-loaded"> Sunday, December 29,
13

Web font loader <body class="clarendon-loading"> <body class="clarendon-loaded"> h1 { font-family:
georgia, serif; } .clarendon-loaded h1 { font-family: Clarendon, georgia, serif; } Sunday, December 29, 13

http://www.flickr.com/photos/droetker0912/5542920908/ More solutions Sunday, December 29, 13

Sunday, December 29, 13

Requirements Sunday, December 29, 13

Requirements Never block rendering Sunday, December 29, 13

Requirements Never block rendering Avoid flash of fallback font Sunday,
December 29, 13

Requirements Never block rendering Avoid flash of fallback font Compress
and subset fonts as much as possible Sunday, December 29, 13

and subset fonts as much as possible Reduce HTTP requests to as few as possible Sunday, December 29, 13

and subset fonts as much as possible Cache as aggressively as browsers allow Reduce HTTP requests to as few as possible Sunday, December 29, 13

and subset fonts as much as possible Cache as aggressively as browsers allow Reduce HTTP requests to as few as possible Websites do not need to look the same in every browser Sunday, December 29, 13

base64 encoding Applied with data uri scheme Can still load
asynchronously + More control (HTML, JSON, CSS) - Complicates build process - Font format support must be detected + Easily combine fonts into one file Sunday, December 29, 13

@font-face { font-family: Clarendon; src: url(data:application/x-font-woff;base64,d09GRgABAAAAAE +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 Sunday, December 29, 13

Base64 encoding Applied with data uri scheme Can still load
asynchronously + More control (HTML, CSS, JSON, XML) - Complicates build process - Font format support must be detected + Easily combine fonts into one file Sunday, December 29, 13

Defer fonts to second page Download the font on the
first page but don’t show it until second page. Check page views per visit metrics + Avoids FOUT on subsequent pages - Fonts missing on first page view Sunday, December 29, 13

Subsetting Subset to your primary character set Strip out any
other unnecessary icon glyphs Fonts must be as small as possible Sunday, December 29, 13

Hinting Test things + Improves type rendering on some platforms
- Increases font file sizes Deliver a readable web font or no web font Sunday, December 29, 13

Caching HTTP caching is vital + Stops fonts being downloaded
unnecessarily - Various methods differ in complexity localStorage works Appcache (might) work Sunday, December 29, 13

Progressive enhancement Sunday, December 29, 13

Modern browsers only Progressive enhancement Sunday, December 29, 13

Modern browsers only WOFF support only Progressive enhancement Sunday, December
29, 13

Modern browsers only WOFF support only localStorage available Progressive enhancement
Sunday, December 29, 13

MODERN BROWSER? NO FONTS SHOW FONTS NO NO SUPPORT WOFF?
FONTS IN STORAGE? NO Guardian: before text renders Sunday, December 29, 13

STORAGE AVAILABLE? NO FONTS SHOW FONTS NO DOWNLOAD FONTS: BASE64
ENCODED IN JSON CACHE FONTS IN STORAGE Guardian: after text renders Sunday, December 29, 13

Responsibility Sunday, December 29, 13

Thank-you! http://lanyrd.com/sckmwb @andyhume Creative Commons Licensed Attribution, Non-Commercial, Share Alike
cc Sunday, December 29, 13

Web Fonts as a Progressive Enhancement, Ampersa...

Web Fonts as a Progressive Enhancement, Ampersand 2013

More Decks by Andy Hume

Other Decks in Technology

Featured

Transcript