Beyond Arial: Using @font-face to unleash web typography. Contains current best practices advice on using @font-face, history of fonts on the web, browser support and font format support and challenges of @font-face. Video of this talk: http://vimeo.com/15402487

1. Beyond Arial
Using @font-face to unleash web typography
John Kary | johnkary@ku.edu
Web Development & Interface Design
University of Kansas, Information Technology
September 2010 KU Web Developers Meeting

2. History
Using @font-face
Website Demo
Challenges

3. History

4. History – 1996
Microsoft introduces “Core Fonts for the Web”
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

5. History – 1996
Microsoft introduces “Core Fonts for the Web”
Highly legible on screen
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

6. History – 1996
Microsoft introduces “Core Fonts for the Web”
Highly legible on screen
Offer a wide range of types styles in a few typefaces
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

7. History – 1996
Microsoft introduces “Core Fonts for the Web”
Highly legible on screen
Offer a wide range of types styles in a few typefaces
Support extensive internationalization
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

8. History – 1996
Andale Mono
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

9. History – 1996
Arial
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

10. History – 1996
Comic Sans MS
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

11. History – 1996
Courier New
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

12. History – 1996
Georgia
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

13. History – 1996
Impact
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

14. History – 1996
Times New Roman
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

15. History – 1996
Trebuchet MS
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

16. History – 1996
Verdana
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

17. History – 1996
Webdings
Source: http://en.wikipedia.org/wiki/Core_fonts_for_the_Web

18. History – 1996
CSS1 is introduced by W3C
Source: http://www.w3.org/TR/REC-CSS1/

19. History – 1996
CSS1 is introduced by W3C
Setting font properties will be among the
most common uses of style sheets.
W3C Cascading Style Sheets, level 1. 5.2 Font properties.
http://www.w3.org/TR/REC-CSS1/#font-properties
Source: http://www.w3.org/TR/REC-CSS1/

20. History – 1996
CSS1 is introduced by W3C
Setting font properties will be among the
most common uses of style sheets.
W3C Cascading Style Sheets, level 1. 5.2 Font properties.
http://www.w3.org/TR/REC-CSS1/#font-properties
But everyone still going crazy with Netscape’s <font> tags...
Source: http://www.w3.org/TR/REC-CSS1/

21. History – 1996

22. History – 1997
Microsoft introduces Web Embedding Fonts Tool (WEFT)
Source: http://www.microsoft.com/typography/web/embedding/default.aspx
Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

23. History – 1997
Microsoft introduces Web Embedding Fonts Tool (WEFT)
TrueType Font (.ttf) => WEFT => Embedded OpenType (.eot)
Source: http://www.microsoft.com/typography/web/embedding/default.aspx
Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

24. History – 1997
Microsoft introduces Web Embedding Fonts Tool (WEFT)
TrueType Font (.ttf) => WEFT => Embedded OpenType (.eot)
Internet Explorer 4+ supports it!
Source: http://www.microsoft.com/typography/web/embedding/default.aspx
Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

25. History – 1997
Netscape 4 supports TrueDoc by Bitstream
Source: http://www.microsoft.com/typography/web/embedding/default.aspx
Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

26. History – 1997
Netscape 4 supports TrueDoc by Bitstream
Discontinued with Netscape 6
Source: http://www.microsoft.com/typography/web/embedding/default.aspx
Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

27. History – 1997
Netscape 4 supports TrueDoc by Bitstream
Discontinued with Netscape 6
Netscape 6 based on Mozilla, which was open-source
Bitstream wouldn’t allow release of its source code
Source: http://www.microsoft.com/typography/web/embedding/default.aspx
Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

28. History – 1997
Netscape 4 supports TrueDoc by Bitstream
Discontinued with Netscape 6
Netscape 6 based on Mozilla, which was open-source
Bitstream wouldn’t allow release of its source code
TrueDoc didn’t kill Bitstream...
Source: http://www.microsoft.com/typography/web/embedding/default.aspx
Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

29. History – 1997
Netscape 4 supports TrueDoc by Bitstream
Discontinued with Netscape 6
Netscape 6 based on Mozilla, which was open-source
Bitstream wouldn’t allow release of its source code
TrueDoc didn’t kill Bitstream...
WhatTheFont
Source: http://www.microsoft.com/typography/web/embedding/default.aspx
Source: http://en.wikipedia.org/wiki/Web_Embedding_Fonts_Tool#Web_Embedding_Fonts_Tool

30. WhatTheFont
Source: http://new.myfonts.com/WhatTheFont/
Source: http://new.myfonts.com/WhatTheFont/iPhone/

31. History – 1998
First draft of CSS2 is introduced by W3C
Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.html#h-14.3.1
Source: http://www.w3.org/TR/2002/WD-CSS21-20020802/fonts.html

32. History – 1998
First draft of CSS2 is introduced by W3C
First mentions of @font-face appear!
Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.html#h-14.3.1
Source: http://www.w3.org/TR/2002/WD-CSS21-20020802/fonts.html

33. History – 1998
First draft of CSS2 is introduced by W3C
First mentions of @font-face appear!
But disappear in CSS2.1 spec... :(
Source: http://www.w3.org/TR/WD-CSS2-971104/fonts.html#h-14.3.1
Source: http://www.w3.org/TR/2002/WD-CSS21-20020802/fonts.html

34. History – 2000
First CSS3 intro provided by W3C
Intend to support @font-face
Source: http://www.w3.org/TR/2000/WD-css3-roadmap-20000414

35. History – Zzzzzz
Browser vendors never come to a format consensus

36. History – Zzzzzz
Browser vendors never come to a format consensus
Web fonts fizzzzzzzzle...

37. History – Web 2.0

38. History – Web 2.0
Resurgence in web typography

39. History – Web 2.0
Resurgence in web typography
All the hip kids are using Prototype and jQuery

40. History – Web 2.0
Resurgence in web typography
All the hip kids are using Prototype and jQuery
JavaScript is now the cool kid

41. History – Web 2.0
Resurgence in web typography
All the hip kids are using Prototype and jQuery
JavaScript is now the cool kid
Let’s use it for everything!

42. History – Web 2.0
Resurgence in web typography
All the hip kids are using Prototype and jQuery
JavaScript is now the cool kid
Let’s use it for everything!
Instead of awesome, we get...

43. History – Web 2.0

44. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

45. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

46. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

47. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

48. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

49. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

50. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

51. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

52. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

53. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

54. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

55. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

56. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

57. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

58. History – Web 2.0
Source: http://www.dezinerfolio.com/2009/03/31/dynamic-font-replacement-solutions

59. History – Last few years...

60. History – Last few years...
CSS3 Font module is currently a medium priority by W3C
Source: http://www.w3.org/Style/CSS/current-work
Source: http://www.w3.org/Style/CSS/Specs/All#fonts

61. History – Last few years...
CSS3 Font module is currently a medium priority by W3C
Source: http://www.w3.org/Style/CSS/current-work
Source: http://www.w3.org/Style/CSS/Specs/All#fonts

62. History – Last few years...
CSS3 Font module is currently a medium priority by W3C
Intend to support @font-face
Follow CSS3
http://www.w3.org/Style/CSS/current-work
Follow Fonts module
http://www.w3.org/Style/CSS/Specs/All#fonts
Source: http://www.w3.org/Style/CSS/current-work
Source: http://www.w3.org/Style/CSS/Specs/All#fonts

63. History – Present

64. History – Present
HTML5

65. History – Present
HTML5
CSS3

66. History – Present
HTML5
@font-face
CSS3

67. @font-face

68. @font-face?

69. @font-face rule allows for linking to fonts that are
automatically activated when needed.
This permits authors to work around the limitation of
"web-safe" fonts [...]
allowing for consistent rendering independent of the
fonts available in a given user's environment.
CSS Fonts Module Level 3. 4.1 The @font-face rule.
http://www.w3.org/TR/2009/WD-css3-fonts-20090618/#font-resources

70. @font-face

71. @font-face
Use any font* you want on your website

72. @font-face
Use any font* you want on your website
* Any font you have the license to use...

73. @font-face
Use any font* you want on your website
* Any font you have the license to use...
Relies on browser’s native font rendering

74. @font-face
Use any font* you want on your website
* Any font you have the license to use...
Relies on browser’s native font rendering
Good and Bad News...

75. @font-face – The Bad News

76. @font-face – The Bad News
Relies on browser’s native font rendering

77. @font-face – The Bad News
Relies on browser’s native font rendering
Inherit all problems of inconsistent font-rendering

78. @font-face – The Bad News
Relies on browser’s native font rendering
Inherit all problems of inconsistent font-rendering
Font size

79. @font-face – The Bad News
Relies on browser’s native font rendering
Inherit all problems of inconsistent font-rendering
Font size
Aliasing

80. @font-face – The Bad News
Relies on browser’s native font rendering
Inherit all problems of inconsistent font-rendering
Font size
Aliasing
Easy to abuse

81. @font-face – The Good News

82. @font-face – The Good News
Relies on browser’s native font rendering

83. @font-face – The Good News
Relies on browser’s native font rendering
Users can copy/paste your text

84. @font-face – The Good News
Relies on browser’s native font rendering
Users can copy/paste your text
Text is natively visible to search-engines

85. @font-face – The Good News
Relies on browser’s native font rendering
Users can copy/paste your text
Text is natively visible to search-engines
More SEO-friendly <h1> <h2> tags

86. @font-face – The Good News
No more reliance on JavaScript, let alone Flash

87. @font-face – The Good News
No more reliance on JavaScript, let alone Flash
Syntax is straight-forward and not hacky

88. @font-face – The Good News
No more reliance on JavaScript, let alone Flash
Syntax is straight-forward and not hacky
OK, not hacky compared to sIFR and that junk

89. @font-face – The Good News
No more reliance on JavaScript, let alone Flash
Syntax is straight-forward and not hacky
OK, not hacky compared to sIFR and that junk
And maybe best of all...

90. @font-face – The Good News
No more reliance on JavaScript, let alone Flash
Syntax is straight-forward and not hacky
OK, not hacky compared to sIFR and that junk
And maybe best of all...
Print stylesheets work!

91. @font-face – The Good News

92. @font-face

93. @font-face – Browser Support

94. @font-face – Browser Support
Source: http://webfonts.info/wiki/index.php?title=Browser_support
Source: Google Analytics (Sept 1-23, 2010, Referenced Sept 23, 2010)

95. 97.6%

96. 97.6%

99. Kinda...

100. @font-face – Font Formats
This gets a little ugly...

101. @font-face – Font Formats
This gets a little ugly...
Currently 5 major formats

102. @font-face – Font Formats
This gets a little ugly...
Currently 5 major formats
OTF – OpenType Font

103. @font-face – Font Formats
This gets a little ugly...
Currently 5 major formats
OTF – OpenType Font
TTF – TrueType Font

104. @font-face – Font Formats
This gets a little ugly...
Currently 5 major formats
OTF – OpenType Font
TTF – TrueType Font
SVG – Scalable Vector Graphic

105. @font-face – Font Formats
This gets a little ugly...
Currently 5 major formats
OTF – OpenType Font
TTF – TrueType Font
SVG – Scalable Vector Graphic
EOT - Embedded OpenType

106. @font-face – Font Formats
This gets a little ugly...
Currently 5 major formats
OTF – OpenType Font
TTF – TrueType Font
SVG – Scalable Vector Graphic
EOT - Embedded OpenType
WOFF – Web Open Font Format

107. @font-face – Font Format Support by Browsers

108. @font-face – Font Format Support by Browsers
Source: http://webfonts.info/wiki/index.php?title=Browser_support

109. So, which browser?

110. So, which browser?
Which format?

111. ALL of them!
(Almost)

112. @font-face – Syntax

113. @font-face – Syntax

114. @font-face – Syntax

115. @font-face – Syntax

116. @font-face – Syntax

117. @font-face – Syntax

118. @font-face – Syntax

119. @font-face – Syntax

120. @font-face – Syntax
Prevents local font of same name from rendering

121. @font-face – Syntax

122. @font-face – Syntax
Internet Explorer 6, 7, 8 are dumb

123. @font-face – Syntax

124. @font-face – Syntax
Load WOFF, TTF, SVG
Other browsers are smart enough to use the font they need

125. I thought you said
this was easy?

126. @font-face – Syntax

127. @font-face generator

128. http://www.fontsquirrel.com/fontface/generator

129. http://www.fontsquirrel.com/fontface/generator

130. http://www.fontsquirrel.com/fontface/generator

131. http://www.fontsquirrel.com/fontface/generator

132. http://www.fontsquirrel.com/fontface/generator

133. http://www.fontsquirrel.com/fontface/generator

134. Could this be even easier?

135. http://code.google.com/webfonts

136. http://code.google.com/webfonts

137. http://code.google.com/webfonts

138. http://code.google.com/webfonts

139. http://code.google.com/webfonts

140. Website Demo

141. KU Internal Audit – Before

142. KU Internal Audit – After

143. Challenges

144. Challenges – MIME types

145. Challenges – MIME types
Chrome & Safari inspector will throw some errors...

146. Challenges – MIME types
Chrome & Safari inspector will throw some errors...

147. Challenges – MIME types
Chrome & Safari inspector will throw some errors...

148. Challenges – MIME types
Chrome & Safari inspector will throw some errors...
No web browser MIME type definition for WOFF, TTF, OTF
Source: http://lists.kde.org/?l=kde-core-devel&m=102236005106158&w=2

149. Challenges – MIME types
Firefox doesn't even consider MIME-type on fonts
Source: https://developer.mozilla.org/en/CSS/@font-face

150. Challenges – MIME types
Firefox doesn't even consider MIME-type on fonts
Source: https://developer.mozilla.org/en/CSS/@font-face

151. Challenges – MIME types
Even though there’s no MIME-type, don’t leave it up to the browser
Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf

152. Challenges – MIME types
Even though there’s no MIME-type, don’t leave it up to the browser
Remember, browsers are dumb
Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf

153. Challenges – MIME types
Even though there’s no MIME-type, don’t leave it up to the browser
Remember, browsers are dumb
Add these to .htaccess
Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf

154. Challenges – FOUC!

155. Challenges – FOUC!
Flash Of Unstyled Content
Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://webtools.ku.edu/template/config.shtml

156. Challenges – FOUC!
Flash Of Unstyled Content
If we don't set styles before the DOM starts loading we'll see FOUC
Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://webtools.ku.edu/template/config.shtml

157. Challenges – FOUC!
Flash Of Unstyled Content
If we don't set styles before the DOM starts loading we'll see FOUC
Place CSS in <head>
Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://webtools.ku.edu/template/config.shtml

158. Challenges – FOUC!
Flash Of Unstyled Content
If we don't set styles before the DOM starts loading we'll see FOUC
Place CSS in <head>
<!--set var="mycss" -->
<!--set var="pagecss" -->
Source: http://stackoverflow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://webtools.ku.edu/template/config.shtml

159. Challenges – Licensing

160. Challenges – Licensing
Not all fonts licensed for web usage
Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

161. Challenges – Licensing
Not all fonts licensed for web usage
But font foundries have no real way to keep fonts from being used
Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

162. Challenges – Licensing
Not all fonts licensed for web usage
But font foundries have no real way to keep fonts from being used
Browser doesn’t enforce DRM (there’s no web DRM to enforce)
Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

163. Challenges – Licensing
Not all fonts licensed for web usage
But font foundries have no real way to keep fonts from being used
Browser doesn’t enforce DRM (there’s no web DRM to enforce)
Could use a font from your font folio...
Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

164. Challenges – Licensing
Not all fonts licensed for web usage
But font foundries have no real way to keep fonts from being used
Browser doesn’t enforce DRM (there’s no web DRM to enforce)
Could use a font from your font folio...
You could also go download a movie from The Pirate Bay...
Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

165. Challenges – Licensing
Not all fonts licensed for web usage
But font foundries have no real way to keep fonts from being used
Browser doesn’t enforce DRM (there’s no web DRM to enforce)
Could use a font from your font folio...
You could also go download a movie from The Pirate Bay...
Both are illegal
Source: http://acko.net/blog/moving-towards-voluntary-drm-for-web-fonts

166. Challenges – Licensing
Plenty of Free Font resources to choose from

167. Challenges – Licensing
Plenty of Free Font resources to choose from
http://www.fontsquirrel.com
http://www.openfontlibrary.org
http://code.google.com/webfonts

168. Challenges – Font Piracy

169. Challenges – Font Piracy
Critics say @font-face encourages font piracy

170. Challenges – Font Piracy
Critics say @font-face encourages font piracy
Well, all my work is freely available on www.ku.edu

171. Challenges – Font Piracy
Critics say @font-face encourages font piracy
Well, all my work is freely available on www.ku.edu
I even host some of my personal code on github.com/johnkary

172. Challenges – Font Piracy
Critics say @font-face encourages font piracy
Well, all my work is freely available on www.ku.edu
I even host some of my personal code on github.com/johnkary
I still have a job...

173. Challenges – Aesthetics

174. Challenges – Aesthetics
@font-face is easy to implement, it’s copy/paste

175. Challenges – Aesthetics
@font-face is easy to implement, it’s copy/paste
Yields easy abuse

176. Challenges – Aesthetics
@font-face is easy to implement, it’s copy/paste
Yields easy abuse
Comic Sans?

177. Challenges – Aesthetics
@font-face is easy to implement, it’s copy/paste
Yields easy abuse
Comic Sans?

178. Challenges – Aesthetics
Read up on web typography

179. Challenges – Aesthetics
Read up on web typography
http://webtypography.net/intro/

180. Challenges – Aesthetics
Read up on web typography
http://webtypography.net/intro/

181. Questions?
Source: http://xkcd.com/590/