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
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Â
Using @font-face to unleash web typography
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
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
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/
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
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
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...
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
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
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...
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
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!
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
148. Challenges â MIME types
Chrome & Safari inspector will throw some errors...
No web browser MIME type deďŹnition 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://stackoverďŹow.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://stackoverďŹow.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://stackoverďŹow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
156. Challenges â FOUC!
Flash Of Unstyled Content
If we don't set styles before the DOM starts loading we'll see FOUC
Source: http://stackoverďŹow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://webtools.ku.edu/template/conďŹg.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://stackoverďŹow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://webtools.ku.edu/template/conďŹg.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://stackoverďŹow.com/questions/3594823/mime-type-for-woff-fonts
Source: http://webtools.ku.edu/template/conďŹg.shtml
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
167. Challenges â Licensing
Plenty of Free Font resources to choose from
http://www.fontsquirrel.com
http://www.openfontlibrary.org
http://code.google.com/webfonts
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...
- We get an influx of hack solutions with equally hacky names
- You know, where it's cool to leave out vowels
Around 2005 we had Scalable Inman Flash Replacement. Uses JavaScript and Flash to replace text.
Que-pho&#x2019;, I guess? Takes a font, runs it through a proprietary generator called FontForge, which generates an SVG font, then is rendered by a 3-part render engine? Please.
PHP + CSS? I don&#x2019;t WANT my designers messing with PHP. Security nightmare. NEXT!
Relies on JavaScript to &#x201C;FLIR-ize&#x201D; HTML. All their demos were broken on their site in Chrome, enough said.
SIIR... OK
sIFR 3! Still relying on server-side image replacement. Code is messy.
DTR, more strategies for replacing fonts
Adding .js to the end of your library apparently makes you cool, and still use JavaScript
IR-ERRRR, yet another IRRR library.
Now we&#x2019;re combining DTR with PHP and CSS, sounds fun, right?
swifr... BORDERING ON AWESOME. Not impressed...
Designers and font foundries thought these were awesome, well that's cause they weren't the ones implementing them
- Only a few are accessible, but ALL are a huge pain
We&#x2019;re developers running into huge piles of...
Wait, @font-face?
What the heck is @font-face?
Pulled from the CSS3 spec
Regardless if it&#x2019;s installed on a user&#x2019;s machine
Well sorta. Licensing comes into play, which we talk about later
So that&#x2019;s @font-face, but what about browser support?
We talked about native rendering of fonts...
If I&#x2019;ve lost you, you can start paying attention again cause now is the fun stuff
Anybody want to guess our IE6 usage on www.ku.edu?
1.8 million hits, 26000 are IE6, that&#x2019;s 1.5%
So uhh...
Mission Accomplished, right?
Well, kinda...
Let&#x2019;s get into what it is
Define @font-face once, reuse font-family multiple times
OpenType spec says two-byte unicode characters don&#x2019;t work in font names on a Mac, so lessons liklihood of a local font rendering in its place.
You could reference a local() font which is completely different than what you think it is.
Chrome 6 knows it uses WOFF, so it downloads that file.
SVG has one, EOT has one
Aesthetics are subjective. They&#x2019;re traditionally a designer&#x2019;s realm.
But control is in the hands of the &#x201C;non-designer&#x201D; developer.