Tweet
Tweet

Slide 1

Slide 1 text

Web Fonts Performance @bram_stein

Slide 2

Slide 2 text

60% use web fonts

Slide 3

Slide 3 text

400kB of web fonts

Slide 4

Slide 4 text

example.com In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales

Slide 5

Slide 5 text

A

Slide 6

Slide 6 text

A

Slide 7

Slide 7 text

example.com A

Slide 8

Slide 8 text

example.com In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales Loading example.com A

Slide 9

Slide 9 text

example.com In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales A

Slide 10

Slide 10 text

B

Slide 11

Slide 11 text

B

Slide 12

Slide 12 text

example.com B

Slide 13

Slide 13 text

example.com Loading example.com B

Slide 14

Slide 14 text

example.com In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the water. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales B

Slide 15

Slide 15 text

?

Slide 16

Slide 16 text

A

Slide 17

Slide 17 text

A

Slide 18

Slide 18 text

example.com A

Slide 19

Slide 19 text

example.com In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it The Frog King, or Iron Henry The Brothers Grimm, Grimm’s Household Tales A

Slide 20

Slide 20 text

example.com In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it The Frog King, or Iron Henry The Brothers Grimm, Grimm’s Household Tales A

Slide 21

Slide 21 text

B

Slide 22

Slide 22 text

B

Slide 23

Slide 23 text

example.com B

Slide 24

Slide 24 text

example.com B

Slide 25

Slide 25 text

example.com In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it The Frog King, or Iron Henry The Brothers Grimm, Grimm’s Household Tales B

Slide 26

Slide 26 text

?

Slide 27

Slide 27 text

request content content loads web fonts load In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales Flash Of Unstyled Text (FOUT) Flash Of Invisible Text (FOIT) request content content loads web fonts load

Slide 28

Slide 28 text

Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT FOUT versus FOIT

Slide 29

Slide 29 text

Chrome Firefox Safari Opera IE9 IE10 IE11 Edge FOIT FOIT FOIT FOIT FOUT FOUT FOUT FOUT 3 sec. 3 sec. ∞ 3 sec. n/a n/a n/a n/a FOUT versus FOIT

Slide 30

Slide 30 text

FOUT is progressive enhancement

Slide 31

Slide 31 text

Flash Of Fallback Text

Slide 32

Slide 32 text

A web font is only downloaded when it is used in a CSS selector that matches a DOM connected node.

Slide 33

Slide 33 text

Hello!

@font-face { font-family: Elena; src: url(font.woff2) format(“woff2”), url(font.woff) format(“woff”); }

Slide 34

Slide 34 text

Hello!

@font-face { font-family: Elena; src: url(font.woff2) format(“woff2”), url(font.woff) format(“woff”); } p { font-family: Elena, Georgia, serif; }

Slide 35

Slide 35 text

Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products Stores

Slide 36

Slide 36 text

Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products Stores

Slide 37

Slide 37 text

Regular.woff Bold.woff Italic.woff Lazy loading of fonts Home About Products Stores

Slide 38

Slide 38 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B HTML

Slide 39

Slide 39 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS

Slide 40

Slide 40 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS

Slide 41

Slide 41 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts Font Loading 400 MS HTML FONT A FONT B CSS FONT A FONT B

Slide 42

Slide 42 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts Font Loading 400 MS HTML FONT A FONT B font a is rendered CSS FONT B

Slide 43

Slide 43 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts Font Loading 400 MS HTML FONT A FONT B web fonts are rendered CSS

Slide 44

Slide 44 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts Font Loading 400 MS HTML FONT A web fonts are rendered FONT B CSS

Slide 45

Slide 45 text

@font-face { font-family: Elena; src: url(elena.woff); font-display: auto|block|swap|fallback|optional; } CSS font-display

Slide 46

Slide 46 text

@font-face { … font-display: block; } CSS font-display In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales request page start loading web fonts web fonts loaded

Slide 47

Slide 47 text

CSS font-display In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales request page start loading web fonts web fonts loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: swap; }

Slide 48

Slide 48 text

CSS font-display In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales request page start loading web fonts web fonts loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: fallback; }

Slide 49

Slide 49 text

CSS font-display request page start loading web fonts web fonts loaded In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales @font-face { … font-display: optional; /* empty cache */ } In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales

Slide 50

Slide 50 text

CSS font-display request page web fonts loaded @font-face { … font-display: optional; /* fonts in cache */ } In olden times when wishing still helped one, there lived a king whose daughters were all beautiful, but the youngest was so beautiful that the sun itself, which has seen so much, was astonished whenever it shone in her face. Close by the king’s castle lay a great dark forest, and under an old lime-tree in the forest was a well, and when the day was very warm, the king’s child went out into the forest and sat down by the side of the cool fountain, and when she was bored she took a golden ball, and threw it up on high and caught it, and this ball was her favourite plaything. Now it so happened that on one occasion the princess’s golden ball did not fall into the little hand which she was holding up for it, but on to the ground beyond, and rolled straight into the The Frog King, or Iron Henry The Brothers Grimm Grimm’s Household Tales

Slide 51

Slide 51 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS font loading starts web fonts are rendered

Slide 52

Slide 52 text

Compression WOFF + WOFF2

Slide 53

Slide 53 text

@font-face { font-family: My Family; src: url(myfont.woff2) format(“woff2”), url(myfont.woff) format(“woff”); } Simplified @font-face

Slide 54

Slide 54 text

Subsetting

Slide 55

Slide 55 text

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹ › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @ © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √

Slide 56

Slide 56 text

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z À Á Â Ã Ä Ā Ă Å Ǻ Ą Æ Ǽ Ć Ĉ Č Ċ Ç Ď Đ È É Ê Ě Ë Ē Ĕ Ė Ę Ĝ Ğ Ġ Ģ Ĥ Ħ Ì Í Î Ĩ Ï Ī Ĭ İ Į IJ Ĵ Ķ Ĺ Ľ Ļ Ŀ Ł Ń Ň Ñ Ņ Ò Ó Ô Õ Ö Ō Ŏ Ő Ø Ǿ Œ Ŕ Ř Ŗ Ś Ŝ Š Ş Ș Ť Ţ Ŧ Ù Ú Û Ũ Ü Ū Ŭ Ů Ű Ų Ẁ Ẃ Ŵ Ẅ Ỳ Ý Ŷ Ÿ Ź Ž Ż Ŋ Ð Þ a b c d e f g h i j k l m n o p q r s t u v w x y z à á â ã ä ā ă å ǻ ą æ ǽ ć ĉ č ċ ç ď đ è é ê ě ë ē ĕ ė ę ĝ ğ ġ ģ ĥ ħ ì í î ĩ ï ī ĭ į ij ı ȷ ĵ ķ ĸ ĺ ľ ļ ŀ ł ń ň ñ ņ ʼn ò ó ô õ ö ō ŏ ő ø ǿ œ ŕ ŗ ř ś ŝ š ş ș ß ſ ť ţ ŧ ù ú û ũ ü ū ŭ ů ű ų ẁ ẃ ŵ ẅ ỳ ý ŷ ÿ ź ž ż ŋ ð þ ff fi ffi fl ffl & ` ´ ˆ ˇ ˜ ¨ ¯ ˘ ˚ ˝ ˙ ¸ ˛ , ; : 0 … ! ¡ ? ¿ “ ” „ ‹ › « » / | - – — • · ( ) [ ] { } * † ‡ § ¶ ^ ~ ¦ \ _ @ © ® ™ ¤ € $ ¢ £ ƒ ¥ ª º ° # 0 1 2 3 4 5 6 7 8 9 ¹ ² ³ ⁄ ¼ ½ ¾ % ‰ + − ± × ÷ = ≠ ≈ < > ≤ ≥ μ ¬ Δ Ω π ∞ ∂ ∫ √

Slide 57

Slide 57 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS font loading starts web fonts are rendered

Slide 58

Slide 58 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Font Loading 400 MS HTML FONT A FONT B CSS FONT A FONT B font loading starts web fonts are rendered

Slide 59

Slide 59 text

Lazy loading is bad (for web fonts)

Slide 60

Slide 60 text

Preload instructions

Slide 61

Slide 61 text

Preload … Link: ; rel=preload; as=font; type=‘font/woff’

Slide 62

Slide 62 text

Preload … Link: ; rel=preload; as=font; type=‘font/woff’

Slide 63

Slide 63 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Preload 400 MS HTML font loading starts CSS FONT A FONT B web fonts are rendered

Slide 64

Slide 64 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render CSS

Slide 65

Slide 65 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS Preload 400 MS HTML FONT A FONT B font loading starts web fonts render ~270ms faster CSS

Slide 66

Slide 66 text

No browser support? Use JavaScript.

Slide 67

Slide 67 text

CSS Font Loading API w3.org/TR/css-font-loading

Slide 68

Slide 68 text

var elena = new FontFace(‘Elena’, ‘url(elena.woff)’); elena.load().then(function () { // Elena has loaded. }); CSS Font Loading API

Slide 69

Slide 69 text

font loading patterns

Slide 70

Slide 70 text

grouping fonts

Slide 71

Slide 71 text

var normal = new FontFace(‘Output Sans’, …); var italic = new FontFace(‘Output Sans’, …); Promise.all([ normal.load(), italic.load() ]).then(function () { // Output Sans regular and italic loaded. });

Slide 72

Slide 72 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts 400 MS NORMAL ITALIC Output Sans regular and italic loaded.

Slide 73

Slide 73 text

loading with timeout

Slide 74

Slide 74 text

function timer(time) { return new Promise(function (resolve, reject) { setTimeout(reject, time); }); }

Slide 75

Slide 75 text

var elena = new FontFace(‘Elena’, ‘url(elena.woff)’); Promise.race([ timer(300), elena.load() ]).then(function () { // Elena has loaded. }).catch(function () { // Elena failed to load or timed out. });

Slide 76

Slide 76 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts 400 MS ELENA TIMER Elena has loaded.

Slide 77

Slide 77 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts 400 MS ELENA Timeout TIMER

Slide 78

Slide 78 text

prioritised loading

Slide 79

Slide 79 text

var primary = new FontFace(‘Primary Font’, …); var secondary = new FontFace(‘Secondary Font’, …); primary.load().then(function () { // Primary font has loaded secondary.load().then(function () { // Secondary font has loaded }); });

Slide 80

Slide 80 text

100 MS 200 MS 300 MS 500 MS 600 MS 700 MS font loading starts 400 MS PRIMARY SECONDARY Primary font has loaded. Secondary font has loaded.

Slide 81

Slide 81 text

font display

Slide 82

Slide 82 text

var elena = new FontFace(‘Elena’, ‘url(elena.woff)’); var html = document.documentElement; html.classList.add(‘fonts-loading’); elena.load().then(function () { html.classList.remove(‘fonts-loading’); html.classList.add(‘fonts-loaded’); }).catch(function () { html.classList.remove(‘fonts-loading’); html.classList.add(‘fonts-failed’); });

Slide 83

Slide 83 text

body { font-family: sans-serif; } .fonts-loaded body { font-family: Elena, sans-serif; } font-display: swap

Slide 84

Slide 84 text

font-display: block .fonts-loading body { visibility: hidden; } .fonts-loaded body, .fonts-failed body { visibility: visible; }

Slide 85

Slide 85 text

optimising cached experience

Slide 86

Slide 86 text

Optimising cached experience … elena.load().then(function () { html.classList.remove(‘fonts-loading’); html.classList.add(‘fonts-loaded’); sessionStorage.fontsLoaded = true; }).catch(function () { … });

Slide 87

Slide 87 text

if (sessionStorage.fontsloaded) { var html = document.documentElement; html.classList.add(‘fonts-loaded’); } Optimising cached experience

Slide 88

Slide 88 text

www.bramstein.com/writing/ web-font-loading-patterns.html

Slide 89

Slide 89 text

IE9 IE10 IE11 Edge Chrome Firefox Safari Opera Android No No No No Yes Yes No* Yes Yes CSS Font Loading API * In progress

Slide 90

Slide 90 text

Font Face Observer fontfaceobserver.com fontfaceobserver.com

Slide 91

Slide 91 text

var elena = new FontFaceObserver(‘Elena’, …); elena.load().then(function () { // font is loaded }); Font Face Observer

Slide 92

Slide 92 text

@font-face { font-family: Elena; src: url(elena.woff2) format(“woff2”), url(elena.woff) format(“woff”); } Font Face Observer

Slide 93

Slide 93 text

optimise start & load 1

Slide 94

Slide 94 text

font loading strategy 2

Slide 95

Slide 95 text

fonts are enhancement 3

Slide 96

Slide 96 text

Web Fonts Performance @bram_stein https://www.bramstein.com FF Enzo by Tobias Kvant Source Code Pro by Paul D. Hunt