We finally have a support of the CSS @font-face rule, on most browsers on the market. There will be an overview of their implementations, advantages and constraints that this brings, as well as some good practices for its use.
(This is a translation of my original french presentation http://www.slideshare.net/yvg/css-fontface-des-polices-personnalises)
5. Short history :
Introduced in CSS2 (1998)
Supported by IE and NS, but not as TTF
Removed from CSS 2.1
Shows up in Safari and Firefox
Re-introduced in CSS3
8. Formats :
IE : EOT
Other : TTF, OTF
+ Opera et Chrome : SVG
WOFF (Firefox 3.6)
9. TTF & OTF ?
Not web formats
May be easily pirated
Only free fonts are usable
10. WOFF & EOT ?
Technical restriction to a website
Unusable locally or elswhere on the web
+ in WOFF
Inside compression (no need for gzip)
License integrated
11. 3 lines :
@font-face {
font-family: "Scrogglet"; /* Give it a name */
src: url(Scrogglet.eot); /* IE */
src: local("Scrogglet"), url(Scrogglet.ttf) format("truetype");
}
12. Here you go !
h1 {
font-family: "Scrogglet", Arial, sans-serif;
color: red;
font-weight: bold;
letter-spacing: 1px;
text-transform: uppercase;
}
14. Examples !
Good :
•http://www.mozilla.com/en-US/firefox/3.6b3/firstrun/
•http://nicewebtype.com/fonts/graublau-sans-web/
•http://www.kleenhanz.com/
Bad :
•http://craigmod.com/journal/font-face/ (2.5Mo fonts)
•http://hsivonen.iki.fi/ (4Mo fonts)
15. Performances
FOUT : Flash Of Unstyled Text
Firefox and Opera load the page with a system font
The others display the text when the font is loaded
IE doesn’t display anything until the font isn’t loaded
if a scipt tag appears before @font-face.
16. Performances
Loading
IE loads the font when it encouters @font-face
Others : As the font is used in a font-family
17. Performances
And if loading fails ?
Firefox & Opera : The text is in system font
Safari : Displays the text in system font after 60sec
IE takes 10 minutes to do the same as Safari
Chrome (beta 3) ... well it never shows up.
18. Let’s optimize !
FontForge and FontSquirrel to reduce the palette
Gzip earn up to 40% weight
Cache and parallel downloads
Lazy Loading in JavaScript, at least for IE
Set @font-face before a <script> tag
Delete unused @font-face rules
19. Lazy Loading ?
Load like on Firefox
function lazyLoad() {
var sRule1 =
"@font-face {" +
" font-family: 'Yanone';" +
" src: url('/bin/resource.cgi?type=font&sleep=6');" +
" src: local('Yanone'), " +
"url('/bin/resource.cgi?type=font&sleep=6') " +
"format('truetype');" +
"}";
var style1 = document.styleSheets[0];
if ( "function" === typeof(style1.insertRule) ) {
// Firefox, Safari, Chrome
style1.insertRule(sRule1, 0);
}
else if ( "string" === typeof(style1.cssText) ) {
// IE
style1.cssText = sRule1;
}
}