TypeKit, FontSquirrel and Kernest are all great solutions to have webfonts in your sites, but wouldn’t you like to know what these services actually do in the underbellies, for once? And do you know that making fonts load faster often means also making it more secure? Kill two glyphs with one stone by subseting, embedding and randomizing your own webfonts. See actual performance benchmarks (for once), and learn some hacks that would drive every would be type-pirate crazy (really).

1. FASTER, &
()
 
WEBFONTS
bram@brampitoyo.com

2. 3

3.  

4.  
1. Subset

5.  
1. Subset, which
can mean 2 things

6.  
1. Using a subset
vs. using a font’s
full character set

7.  
1. Subseting,
which means
splitting 1 font file
into multiple parts

8.  
1. Subset
2. Embed

9.  
1. Subset
2. Embed
vs. linking directly
to a font file

10.  
1. Subset
2. Embed
3. Randomize

11.  
1. Subset
2. Embed
3. Randomize,
a new way to secure

12.  
1. Subset
2. Embed
Make webfonts both
faster & more secure

13.  
3. Randomize
Taking a step further

14.  ’  
   formats

15.  ’  
   formats,
although, let’s talk
about it over beer
aerwards.

16.  
Fonts should be naked,
or come with minimal
obscuring

17.  
Fonts should be naked,
or come with minimal
obscuring, because it
creates the best user &
developer experience.

18.  
Fonts should be naked,
or come with minimal
obscuring, because it
creates the best user &
developer experience.

19.  
Fonts should be naked,
or come with minimal
obscuring, because it
creates the fastest
experience.

20.  
Fonts should be naked,
or come with minimal
obscuring, because it
creates the most
compatible experience

21.  
Fonts should be naked,
or come with minimal
obscuring, because it
creates the most
@font-face browsers

22.  
Fonts should be naked,
or come with minimal
obscuring, because it
creates the least
complex experience.

23.  
Fonts should be naked,
or come with minimal
obscuring, because it
creates the less bugs
for you and me

24.  
1. Using a subset
vs. using a font’s
full character set

25. +-
Basic Latin
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~

26. +-
Latin-1 Supplement
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~
¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ
×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ

27. +-, -
Punc., Currency, Number Forms
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~
¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ
×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ
‐‑‒–—―‖‗‘’‚‛“”„‟†‡•‣․‥…‧ ‰‱′″‴‵‶‷‸‹›※‼‽‾‿⁀⁁⁂⁃⁄⁅⁆⁇⁈⁉⁊⁋⁌⁍⁎⁏⁐⁑⁒⁓⁔
⁕⁖⁗⁘⁙ ⁛⁜ Ầ⁰ⁱ⁴⁵⁶⁷⁸⁹⁺⁻⁼⁽⁾ⁿ₀₁₂₃₄₅₅₆₇₈₉₊₋₌₍₎₠₡₢₣₤₥₦₧₨₩₪₫€₭₮₯₰₱‘ ’“”
⅓⅔⅕⅖⅗⅘⅙⅚⅛⅜⅝⅞⅟

28. 
http://zenoplex.jp/tools/
unicoderange_generator.html

29. — ,

30.  -

31. @- {
font-family: Gentium;
src: url(Gentium.ttf );
}

32. @- {
font-family: Gentium;
src: url(Gentium.ttf );
unicode-range:+-
}

33. 
Most of our documents
are designed to be typeset
in 1 language.

34. 
Most of our documents
are designed to be typeset
in 1 language (it’s faster
to load what you use.)

35.  

36. 
Full:
Basic Latin, Latin-1,
Latin Extended-A, Greek,
Cyrillic, Punctuation, Super &
Sub, Currency, Number Forms

37. 
Full: 112 

38. 
Full: 112 
Latin-1: 44 

39. 
Full: 112 
Latin-1: 44 
Basic Latin: 28 

40. 
Full: 112 
Latin-1: 44 
Basic Latin: 28 
Optimized
Basic Latin, Fractions,
Punctuation, Currency, Math

41. 
Full: 112 
Latin-1: 44 
Basic Latin: 28 
Optimized
Just like Latin-1, but
– diacritics and + helpful stuff

42. 
Full: 112 
Latin-1: 44 
Basic Latin: 28 
Optimized: 44 

43. 

44. 
Full: 2.9 s

45. 
Full: 2.9 s
Latin-1: 1.9 s

46. 
Full: 2.9 s
Latin-1: 1.9 s
Basic Latin: 1.5 s

47. 
Full: 2.9 s
Latin-1: 1.9 s
Basic Latin: 1.5 s
Optimized: 1.7 s

48.  
1. Using a subset
vs. using a font’s
full character set

49. ?

50.  
1. Using a subset
vs. using a font’s
full character set

51.  
1. Subseting,
which means
splitting 1 font file
into multiple parts

52. +-
Basic Latin
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~

53.  ’ 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

54.    
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

55. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

56. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

57. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

58. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

59.  

60. @- {
font-family: Gentium1;
src: url(Gentium1.ttf );
}

61. @- {
font-family: Gentium1;
src: url(Gentium1.ttf );
}

62. @- {
font-family: Gentium2;
src: url(Gentium2.ttf );
}

63. @- {
font-family: Gentium3;
src: url(Gentium3.ttf );
}

64.  {
font-family:
“Gentium1”,
“Gentium2”,
“Gentium3”; }

65. 
Multiple font files can
load in parallel.

66. 
Multiple font files can
load in parallel
(faster loading time.)

67. 
If you don’t have a font
creation soware handy,
you can’t get the full file.

68. 
If you don’t have a font
creation soware handy,
you can’t get the full file
(harder to pirate.)

69.  

70. 

71. 
One set: 112 

72. 
Capital: 13 
Lowercase: 13 
Number: 12 
Symbol: 33 
Expert: 66 

73. 
One set: 112 
Multiple subsets: 137 

74. 

75. 
One set: 2.9 s

76. 
One set: 2.9 s
Multiple subsets
Capital, Lowercase,
Number, Symbol &
Expert (everything else)

77. 
One set: 2.9 s
Multiple subsets: 1.9 s

78.  
1. Subseting,
which means
splitting 1 font file
into multiple parts

79. ?

80.  
1. Subset

81.  
1. Subset
2. Embed
vs. linking directly
to a font file

82.  . 

83. 
Reading embedded data
is faster than reading
linked ones.

84. 
If you don’t pass the file
through a Base-64
decoder, you can’t have it

85. 
If you don’t pass the file
through a Base-64
decoder, you can’t have it
(harder to pirate.)

86. :  
http://soware.hixie.ch/utilities/
cgi/data/data

87.  

88. @- {
font-family: Gentium;
}

89. @- {
font-family: Gentium;
src: url(Gentium.ttf );
}

90. @- {
font-family: Gentium;
src: url(Gentium.ttf );
}

91. @- {
font-family: Gentium;
src: url(“data:font/
truetype;base64,…”);
}

92.  

93. 

94. 
Linked: 2.9 s

95. 
Linked: 2.9 s
Embedded: 1.9 s

96.  
1. Subset
2. Embed
vs. linking directly
to a font file

97. ?

98.  
1. Subset

99.  
1. Subset
2. Embed

100.  
1. Subset
2. Embed
vs. linking directly
to a font file

101.  
1. Subset
2. Embed
3. Randomize

102.  
1. Subset
2. Embed
3. Randomize,
A new way to secure.

103. Proceed at your own risk.

104. Proceed at your own risk
(hacky, maybe faster
& can be more efficient.)

105. Proceed at your own risk
(hacky, maybe faster
& can be more efficient,
but incredibly fun.)

106. +-
Basic Latin
!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVW
XYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~

107.  ’ 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

108.  
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

109. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

110. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

111. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

112.  
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

113.  
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

114. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

115. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

116. 
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

117.  
!"#$%&'()*+,-./
0123456789:;<=>?@
ABCDEFGHIJKLMNOPQ
RSTUVWXYZ[^_`
abcdefghijklmnopqrst
uvwxyz{|}~

118. 
Multiple font files can
load in parallel.

119. 
Multiple font files can
load in parallel
(but it’s illogically split
and harder to manage.)

120. 
As if assembling isn’t
hard enough already, the
font is split at random.

121. 
As if assembling isn’t
hard enough already, the
font is split at random
(good luck trying it.)

122.  
1. Subset
2. Embed
3. Randomize,
A new way to secure.

123. ?

124.  ( )

125.  
 

126.  
 
 
 
 
-

127. 

 
  Plain

128. 

 
  2.9

129. 

 
  #1

130. 

 
  1.9

131. 

 
- #2

132. 

 
- 1.9

133. 

 
- #1  #2

134. 

 
- 3.3

135.  
 
 
  2.9 1.9
 
- 1.9 3.3

136.   

137.   
One set + link

138.   
 + 1 font file

139.   
 + 1 font file
Multiple sets + link

140.   
 + 1 font file
 + x font files

141.   
 + 1 font file
 + x font files
One set + embedded

142.   
 + 1 font file
 + x font files
1  file

143.   
 + 1 font file
 + x font files
1  file
Multiple sets + Embed

144.   
 + 1 font file
 + x font files
1  file
1  file (bigger)

145. ?

146.  
1. Subset

147.  
1. Subset, which
can means 2 things

148.  
1. Using a subset
vs. using a font’s
full character set

149.  
1. Subseting,
which means
splitting 1 font file
into multiple parts

150.  
1. Subset
2. Embed

151.  
1. Subset
2. Embed
vs. linking directly
to a font file

152.  
1. Subset
2. Embed
3. Randomize

153.  
1. Subset
2. Embed
3. Randomize,
a new way to secure

154. 

155.  
1. File sizes
(subseting can be good)

156.  
1. File sizes
2. Number of files to load
(subseting can be bad)

157.  
1. File sizes
2. Number of files to load
(subseting can be good,
if file loads parallel)

158.  
1. File sizes
2. Number of files to load
3. File format
(Base-64 is faster)

159.  
1. File sizes
2. Number of files to load
3. File format
(Base-64 is faster, but
be careful splitting it.)

160.  
1. File sizes
2. Number of files to load
3. File format
(Also, don’t subset and
embed all at once.)

161. ?

162. FASTER, &
()
 
WEBFONTS

163. .
bram@brampitoyo.com