Practical steps for using @font-face in your websites now

4. What is @font-face?
• CSS2 rule
• Allows embedding of fonts through
css
• Access hosted fonts instead of
relying on user’s installed fonts

5. What’s the big deal?
• Rely on native browser rendering,
the same as with web safe fonts
• Cufon/sifr great but css support is
incomplete, plus relies on javascript
• It’s easy
• Print stylesheets work with @font-
face

6. Can we use it?

7. colamovies.com
28,766 Visitors

8. midlandsbiz.com
10,253 Visitors

9. unmatchedstyle.com
35,400 Visitors

10. With great power comes
great responsibility
• @font-face makes knowledge of
typography even more important
• great design has been done with
only web-safe fonts

14. Not so fast!

15. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

16. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

17. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

18. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

19. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

20. So how do you do it?
@font-face {
font-family: 'PTSansRegular';
src: url('PT_Sans.eot');
src: local('PT Sans Regular'), local('PTSans-Regular'),
url('PT_Sans.woff') format('woff'),
url('PT_Sans.ttf') format('truetype'),
url('PT_Sans.svg#PTSans-Regular') format('svg');
}
p {
font-family: "PTSansRegular", Helvetica, Arial, sans-serif;
}
Based on: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

21. Licensing
• Make sure you own a license for
font
• Read the EULA from each foundry.
• Take precautions to secure the
font from download
• Typekit fills a void

22. Browser Differences
Firefox Mac IE/FF XP with Cleartype
Firefox XP w/o Cleartype IE6 w/o Cleartype

23. IE Jaggy Fix
p {
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

24. IE Jaggy Fix
p {
filter: alpha(opacity=100);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

25. FOUT
• Flash of
unstyled
text
• Webkit
hides font

26. Fighting the FOUT
• place css at top so it loads first
• use Paul Irish embed method
• use server side compression to
serve files (zip/gzip)
• base64 encode ttf/otf fonts
• subset fonts to reduce file size

27. Without base64 encoding

28. Without base64 encoding

29. Without base64 encoding

30. Without base64 encoding

31. With base64 encoding

32. With base64 encoding

33. With base64 encoding

34. Fighting the FOUT
• place css at top so it loads first
• use Paul Irish embed method
• use server side compression to serve
files
• base64 encode ttf/otf fonts
• subset fonts to reduce file size

35. Subset Fonts
fontsquirrel @font-face generator
http://www.fontsquirrel.com/fontface/generator

36. Use correct font for styles
h1, strong {
font-weight: normal;
font-family: "PTSansBold", Helvetica, Arial, sans-serif;
}
em {
font-style: normal;
font-family: "PTSansItalic", Helvetica, Arial, sans-serif;
}
• Webkit interprets correctly, other
browsers not so much

37. My @font-face site: petridisc.com
Resources & Tools
fontsquirrel.com
webfonts.info
paulirish.com
typekit.com
webfontspecimen.com
Get crackin’.