Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

What the @font-face

12,263 views

Published on

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

Published in: Technology, Art & Photos
  • Be the first to comment

What the @font-face

  1. 1. What is @font-face? • CSS2 rule • Allows embedding of fonts through css • Access hosted fonts instead of relying on user’s installed fonts
  2. 2. 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
  3. 3. Can we use it?
  4. 4. colamovies.com 28,766 Visitors
  5. 5. midlandsbiz.com 10,253 Visitors
  6. 6. unmatchedstyle.com 35,400 Visitors
  7. 7. 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
  8. 8. Not so fast!
  9. 9. 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/
  10. 10. 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/
  11. 11. 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/
  12. 12. 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/
  13. 13. 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/
  14. 14. 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/
  15. 15. 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
  16. 16. Browser Differences Firefox Mac IE/FF XP with Cleartype Firefox XP w/o Cleartype IE6 w/o Cleartype
  17. 17. IE Jaggy Fix p { filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  18. 18. IE Jaggy Fix p { filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  19. 19. FOUT • Flash of unstyled text • Webkit hides font
  20. 20. 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
  21. 21. Without base64 encoding
  22. 22. Without base64 encoding
  23. 23. Without base64 encoding
  24. 24. Without base64 encoding
  25. 25. With base64 encoding
  26. 26. With base64 encoding
  27. 27. With base64 encoding
  28. 28. 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
  29. 29. Subset Fonts fontsquirrel @font-face generator http://www.fontsquirrel.com/fontface/generator
  30. 30. 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
  31. 31. My @font-face site: petridisc.com Resources & Tools fontsquirrel.com webfonts.info paulirish.com typekit.com webfontspecimen.com Get crackin’.

×