Faster (and Coincidentally more secure) Webfonts

As cloud-hosted webfonts becomes the preferred way to go, it’s high time we understand methods that they use to make webfonts load faster and more resistant to copying, that you can pick and choose to optimize your next project.

The first version of this presentation was presented in 2010: http://www.slideshare.net/brampitoyo/font-conf

Transcript

1. ! ! ! ! ! bram@mozilla.com FASTER, &
   (coincidentally)
   more secure
   WEBFONTS
3.    Four things
4.    Four things
   1. History
5.    Four things
   1. History 2. Methods
6.    Four things
   1. History 2. Methods 3. Problems
7.    Four things
   1. History 2. Methods 3. Problems 4. Future
8.    Four things
   1. History 2. Methods 3. Problems 4. Future
9. Font subsetting and optimization is an old problem.
10. Bitstream TrueDoc Portable Font Resource (pfr) ! 2000–05
11. http://web.archive.org/web/20080225155328/http://www.bitstream.com/font_rendering/products/truedoc/samples.html
12. http://web.archive.org/web/20080225161120/http://www.bitstream.com/font_rendering/products/truedoc/itv.html
13. http://web.archive.org/web/20080225161120/http://www.bitstream.com/font_rendering/products/truedoc/itv.html
16. Microsoft Embedded OpenType (eot) ! 1997–2008
18. Subsetting + MicroType compression
19. Encryption and trusted roots on server. Proprietary decryption on client.
20.    Issues 1. Extra work 2. MS advantage 3. Patents, licensing    …
21. sIFR ! 2004–08
22. 1. Load page 2. Check for Flash and designated id/class 3. Create Flash movie 4. ActionScript draw
23. Doesn’t work for long texts. Relatively copyable. “Block” button when using adblocker
24. Cufón
 svg - vml/canvas ! 2009–11
25. https://github.com/sorccu/cufon/wiki/about
26. License incompatibility
27. WOFF ! 2010–present (We’ll go over later)
28.    Four things
    1. History 2. Methods 3. Benchmark 4. Future
29.    Four things
    1. History 2. Methods 3. Benchmark 4. Future
30.    Three methods
31.    Three methods
    1. Subsetting
32.    Three methods
    1. Subsetting,
     which means
     splitting 1 font file
     into multiple parts
33.    Three methods
    1. Subsetting
    2. Embedding
34.    Three methods
    1. Subsetting
    2. Embedding  vs. directly linking
     to the naked font file
35.    Three methods
    1. Subsetting
    2. Embedding 3. Compressing
36.    Three methods
    1. Subsetting
    2. Embedding 3. Compressing    by using woff
37. my principle Fonts should be naked,
    or come with minimal obscuring.
38. my principle Fonts should be naked,
    or come with minimal obscuring, because it creates the best user & developer experience.
39. my principle Fonts should be naked,
    or come with minimal obscuring, because it creates the best user & developer experience.
40. my principle Fonts should be naked,
    or come with minimal obscuring, because it creates the fastest experience.
41. my principle Fonts should be naked,
    or come with minimal obscuring, because it creates the most compatible experience
42. my philosophy
    Fonts should be naked,
    or come with minimal obscuring, because it creates the most @font-face browsers
43. my principle Fonts should be naked,
    or come with minimal obscuring, because it creates the least complex experience.
44. my philosophy
    Fonts should be naked,
    or come with minimal obscuring, because it creates the less bugs
    for you and me
45. my principle Fonts should be naked,
    or come with minimal obscuring.
46. reality Consilience has been reached between all stakeholders.
47. reality Third-party solutions uses similar methods. No secret sauce.
48. reality Very few are doing it themselves.
49.    Three methods
    1. Subsetting,
     which means
     splitting 1 font file
     into multiple parts
50. u+20-7e
    Basic Latin
    ! !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
    XYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
51. u+00-ff
    Latin-1 Supplement
    ! !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
    XYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
    ! ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ
    ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ
52. u+2000-cf, 2150-f
    Punc., Currency, Number Forms
    ! !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
    XYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
    ! ¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ
    ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ
    ! --‒–—―‖‗‘’‚‛“”„‟†‡•‣․‥…‧ ‰‱′″‴‵‶‷‸‹›※‼‽‾‿⁀⁁⁂⁃⁄⁅⁆⁇⁈⁉⁊⁋⁌⁍⁎⁏⁐⁑⁒⁓⁔
    ⁕⁖⁗⁘⁙⁚⁛⁜⁝⁞⁰ⁱ⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ₀₁₂₃₄₅₅₆₇₈₉₊₋₌₍₎₠₡₢₣₤₥₦₧₨₩₪₫€₭₮₯₰₱₲₳₴₵
    ⅓⅔⅕⅖⅗⅘⅙⅚⅛⅜⅝⅞⅟
54. http://zenoplex.jp/tools/
    unicoderange_generator.html
55. —so then,
56. css unicode-range
57. @font-face {
    font-family: Gentium;
    src: url(Gentium.ttf);
    ! }
58. @font-face {
    font-family: Gentium;
    src: url(Gentium.ttf);
    unicode-range: u+0-7f
    }
59. http://fonts. googleapis.com/css? family=Open+Sans& subset=latin
60. @font-face {
    font-family: Gentium;
    src: url(Gentium.ttf);
    unicode-range: u+41;
    }
61. http://fonts. googleapis.com/css? family=Open+Sans& text=A
62. benefit
    Most of our documents are designed to be typeset in 1 language.
63. benefit
    Most of our documents are designed to be typeset in 1 language (faster to load only what you use).
64. subsetting demo
65. result
    Full:
    Latin, Latin Extended, Cyrillic, Cyrillic Extended, Gree, Greek Extended, Vietnamese
66. result
    Full: 217 kb
67. result
    Latin: 36 kb Latin Ext: 80 kb
68. result
    Cyrillic: 54 kb Cyrillic Ext: 120 kb
69. result
    Greek: 48 kb Greek Ext: 49 kb
70. result
    Vietnamese: 69 kb
71. subset it further Sure, we only use Latin, but let’s subset it again.
72. u+20-7e
    Basic Latin
    ! !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
    XYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~
73. what we’re using
    !"#$%&'()*+,-./ 0123456789:;<=>?@
    ABCDEFGHIJKLMNOPQ
    RSTUVWXYZ[\^_`
    abcdefghijklmnopqrst
    uvwxyz{|}~
74. what we can split
    !"#$%&'()*+,-./ 0123456789:;<=>?@
    ABCDEFGHIJKLMNOPQ
    RSTUVWXYZ[\^_`
    abcdefghijklmnopqrst
    uvwxyz{|}~
75. uppercase
    !"#$%&'()*+,-./ 0123456789:;<=>?@
    ABCDEFGHIJKLMNOPQ
    RSTUVWXYZ[\^_`
    abcdefghijklmnopqrst
    uvwxyz{|}~
76. lowercase
    !"#$%&'()*+,-./ 0123456789:;<=>?@
    ABCDEFGHIJKLMNOPQ
    RSTUVWXYZ[\^_`
    abcdefghijklmnopqrst
    uvwxyz{|}~
77. numerals
    !"#$%&'()*+,-./ 0123456789:;<=>?@
    ABCDEFGHIJKLMNOPQ
    RSTUVWXYZ[\^_`
    abcdefghijklmnopqrst
    uvwxyz{|}~
78. punctuation
    !"#$%&'()*+,-./ 0123456789:;<=>?@
    ABCDEFGHIJKLMNOPQ
    RSTUVWXYZ[\^_`
    abcdefghijklmnopqrst
    uvwxyz{|}~
79. css
80. @font-face {
    font-family: Gentium1;
    src: url(Gentium1.ttf);
    }
81. @font-face {
    font-family: Gentium1;
    src: url(Gentium1.ttf);
    }
82. @font-face {
    font-family: Gentium2;
    src: url(Gentium2.ttf);
    }
83. @font-face {
    font-family: Gentium3;
    src: url(Gentium3.ttf);
    }
84. body {
    font-family:
    “Gentium1”,
    “Gentium2”,
    “Gentium3”; }
85. subsetting demo
86. result
87. result
    One set: 112 kb
88. result
    Capital: 13 kb
    Lowercase: 13 kb
    Number: 12 kb
    Symbol: 33 kb
    Expert: 66 kb
89. result
    One set: 112 kb
    Multiple subsets: 137 kb
90. benchmark
91. benchmark
    One set: 1.85 s
92. benchmark
    One set: 1.85 s
    Multiple subsets
    Capital, Lowercase,
    Number, Symbol &
    Expert (everything else)
93. benchmark
    ! One set: 1.85 s
    Multiple subsets: 1.66 s
94. benefit
    More secure. Harder to get a working original from disparate copies.
95. caveat
    The aggregate size of multiple subsetted files is bigger than one single file that contains everything.
96. benefit
    Parallel loading of many smaller files, versus a single large file. Things will feel faster.
97. caveat
    At the end of the day, still uses more bandwidth.
98. benefit
    Parallel loading means minimizing Flash of Unstyled Texts on Blink and Webkit engines.
99. caveat
    Hard to generate and maintain. ! (FontSquirrel can help).
100. rule of thumb
     Just enough subset files to load parallel and be secure, but not too many. (Most services use 2).
101. three things
     1. Subseting,
     which means
     splitting 1 font file
     into multiple parts
102. ?
103.    Three methods
     1. Subsetting
104.    Three methods
     1. Subsetting
     2. Embedding  vs. directly linking
      to the naked font file
105. @font-face {
     font-family: Gentium;
     ! ! }
106. @font-face {
     font-family: Gentium;
     src: url(Gentium.ttf);
     ! }
107. @font-face {
     font-family: Gentium;
     src: url(Gentium.ttf);
     ! }
108. @font-face {
     font-family: Gentium;
     src: url(“data:font/ truetype;base64,…”);
     }
109. embedding demo
110. benchmark
111. benchmark
     Linked: 1.85 s
112. benchmark
     Linked: 1.85 s
     Embedded: 0.95 s
113. benefit
     Reduces amount of http page requests
114. caveat
     “Large data URIs inlined in render-blocking css are harmful for render performance.” https://docs.google.com/presentation/d/1z49qp03iXAJIkbXaMtCmWW_Pnnq-MzXGW139Xw8-paM/edit#slide=id.g174590d5d_0194
115. benefit
     css can be cached. No need to load it over and over again.
116. benefit
     If you don’t pass the file through a Base-64 decoder, you can’t have it (harder to pirate).
117.    Three methods
     1. Subsetting
     2. Embedding  vs. directly linking
      to the naked font file
118.    combine
     1. Subsetting +
     2. Embedding
119. benchmark One vs. multiple subsets Linking vs. embedding
120. one set multiple subsets
121. one set multiple subsets linked embedded
122. one set linked vanilla
123. one set linked 2 requests 142.25 kb
124. one set linked 1.85 s
125. multiple subsets linked #1
126. multiple subsets linked 6 requests 173.76 kb
127. multiple subsets linked 1.66 s
128. one set embedded #2
129. one set embedded 1 request 89.53 kb
130. one set embedded 0.95 s
131. multiple subsets embedded #1 + #2
132. multiple subsets embedded 1 request 183.43 kb
133. multiple subsets embedded 1.71 s
134. one set multiple subsets linked 1.85 1.66 embedded 0.95 1.71
135. caveat
     Benefits diminishes the more you split-embed. I suspect that this is why most services split into 2.
136. ?
137.    Three methods
     1. Subsetting
     2. Embedding
138.    Three methods
     1. Subsetting
     2. Embedding 3. Compressing    by using woff
139. OpenType/TrueType + zlib compress2() + metadata block. ! Decode by user agents.
140. Temporary install, not installable on desktop, can’t be decoded by anything but user agent.
141. early – mid 2009: zot and .webfont ! Jonathan Kew Tal Leming Erik van Blokland
142. “Most of the important foundries are supporting #webfont” ! – Tiffany Wardle http://blog.typegirl.com/post/142912558/most-of-the-important-foundries-are-supporting-webfont
143. mid 2009: “We […] combined our zot and .webfont proposals into a new WebOTF proposal.” http://lists.w3.org/Archives/Public/www-font/2009JulSep/1238.html
144. mid 2009: WebOTF > woff http://people.mozilla.org/~jkew/woff/woff-2009-09-16.html
145. “We endorse the woff specification […] as a Web font format.” ! – Mozilla https://blog.mozilla.org/blog/2009/10/20/mozilla-supports-web-open-font-format/
146. early 2010: Submission request to w3c, endorsed by Microsoft and Opera. http://www.w3.org/Submission/2010/03/
147. May ’10: Chrome 5 Mar – Apr ’11: Opera 11.1 July ’11: Safari 5.1
148. ttf2woff http://ttf2woff.com ! FontSquirrel http://fontsquirrel.com
149. compressing demo
150.    combine
     1. Subsetting +
     2. Embedding + 3. Compressing
151. benchmark One vs. multiple subsets Linking vs. embedding
152. benchmark One vs. multiple subsets Linking vs. embedding ttf vs. woff
153. one set multiple subsets linked embedded
154. one set multiple subsets linked 2 requests 142.25 kb 6 requests 173.76 kb embedded 1 request 89.53 kb 1 request 183.43 kb
155. one set multiple subsets linked 1.85 1.66 embedded 0.95 1.71
156. ttf one set multiple subsets linked 1.85 1.66 embedded 0.95 1.71
157. woff one set multiple subsets linked embedded
158. woff one set multiple subsets linked 73.48 kb embedded
159. woff one set multiple subsets linked 0.99 s embedded
160. woff one set multiple subsets linked 107.82 kb embedded
161. woff one set multiple subsets linked 1.39 s embedded
162. woff one set multiple subsets linked embedded 73.49 kb
163. woff one set multiple subsets linked embedded 0.84 s
164. woff one set multiple subsets linked embedded 107.87 kb
165. woff one set multiple subsets linked embedded 1.11 s
166. woff one set multiple subsets linked 0.99 1.39 embedded 0.84 0.98
167. ttf woff one set multiple subsets linked embedded
168. ttf woff one set multiple subsets linked 142.25 kb 73.48 kb 173.76 kb 107.82 kb embedded 89.53 kb 73.49 kb 183.43 kb 107.87 kb
169. space saved one set multiple subsets linked 48% 37% embedded 17% 41%
170. ttf woff one set multiple subsets linked 1.85 0.99 1.66 1.39 embedded 0.95 0.84 1.71 1.11
171. time saved one set multiple subsets linked 48% 16% embedded 11% 35%
172. conclusion
173. conclusion There’s literally no reason not to use woff.
174. ttf woff one set multiple subsets linked 142.25 kb 73.48 kb 173.76 kb 107.82 kb embedded 89.53 kb 73.49 kb 183.43 kb 107.87 kb
175. ttf woff one set multiple subsets linked 142.25 kb 73.48 kb 173.76 kb 107.82 kb embedded 89.53 kb 73.49 kb 183.43 kb 107.87 kb
176. conclusion woff is already compressed, so base64 embedding isn’t actually your first choice.
177. ttf woff one set multiple subsets linked 1.85 0.99 1.66 1.39 embedded 0.95 0.84 1.71 1.11
178. conclusion Embedding will generally be faster than linking, even though the size difference is moot.
179. ttf woff one set multiple subsets linked 142.25 kb 73.48 kb 173.76 kb 107.82 kb embedded 89.53 kb 73.49 kb 183.43 kb 107.87 kb
180. conclusion Reiterating earlier point, more subsets = worse performance. Do it only for security.
181. later woff 2.0 MicroType Express lzma Zopfli Brotli
182.    Three methods
183.    Three methods
     1. Subsetting
184.    Three methods
     1. Subsetting,
      which means
      splitting 1 font file
      into multiple parts
185.    Three methods
     1. Subsetting
     2. Embedding
186.    Three methods
     1. Subsetting
     2. Embedding  vs. directly linking
      to the naked font file
187.    Three methods
     1. Subsetting
     2. Embedding 3. Compressing
188.    Three methods
     1. Subsetting
     2. Embedding 3. Compressing    by using woff
189.    Four things
     1. History 2. Methods
190. ?
191.    Four things
     1. History 2. Methods 3. Problems
192. flash of unstyled text Used to be a problem in Firefox, Opera & ie 7–9. Eliminated in 2011.
193. caveat Because you can no longer see text until font is loaded, make loading time as fast as possible.
194.    Three methods 1. Separate font CSS 2. Cache 3. Responsify
195.    Three methods 1. Separate font CSS    Create file for each    individual typeface
196.    Three methods 2. Cache    Maximize expires    headers (obviously)
197.    Three methods 2. Via Chris Coyier:    Load page without    font. Load font when    page is done. Onreload,    font shows instantly. http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/
198.    Three methods 3. Responsify    Use @font-face, but    only specify it when    screen size is large.    – Dave Rupert http://codepen.io/davatron5000/pen/nrfGA
199.    Four things
     1. History 2. Methods 3. Problems 4. Future
200. ?
201.    Four things
     1. History 2. Methods 3. Problems 4. Future
202. Network Information api
203. “…allow applications to be gentle with the user’s bandwidth when they know it is rare or expensive.” http://www.w3.org/TR/netinfo-api/
204. if (navigator.connection.bandwidth > 2) { i.src = "http://example.com/pony_hd.png"; } else { i.src = "http://example.com/pony_ld.png"; } http://www.w3.org/TR/netinfo-api/
205. ?
206.    Four things
207.    Four things
     1. History
208.    Four things
     1. History 2. Methods
209.    Four things
     1. History 2. Methods 3. Problems
210.    Four things
     1. History 2. Methods 3. Problems 4. Future
211. FASTER, &
     (coincidentally)
     more secure
     WEBFONTS
212. ! ! ! Thanks
     bram@mozilla.com