Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

What’s this? Sunday, December 29, 13

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Meaning is the baseline Sunday, December 29, 13

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Web font loader Sunday, December 29, 13

Slide 21

Slide 21 text

Web font loader Sunday, December 29, 13

Slide 22

Slide 22 text

Web font loader var WebFontConfig = { custom: { families: ['Clarendon', 'Clarendon Bold'], urls: ['/myfonts.css'] } }; Sunday, December 29, 13

Slide 23

Slide 23 text

Web font loader 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

Slide 24

Slide 24 text

Web font loader Sunday, December 29, 13

Slide 25

Slide 25 text

Web font loader h1 { font-family: georgia, serif; } .clarendon-loaded h1 { font-family: Clarendon, georgia, serif; } Sunday, December 29, 13

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Sunday, December 29, 13

Slide 28

Slide 28 text

Sunday, December 29, 13

Slide 29

Slide 29 text

Sunday, December 29, 13

Slide 30

Slide 30 text

Sunday, December 29, 13

Slide 31

Slide 31 text

Requirements Sunday, December 29, 13

Slide 32

Slide 32 text

Requirements Never block rendering Sunday, December 29, 13

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Requirements Never block rendering Avoid flash of fallback font Compress 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

Slide 37

Slide 37 text

Requirements Never block rendering Avoid flash of fallback font Compress 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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Progressive enhancement Sunday, December 29, 13

Slide 46

Slide 46 text

Modern browsers only Progressive enhancement Sunday, December 29, 13

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

Responsibility Sunday, December 29, 13

Slide 53

Slide 53 text

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