What the @font-face

11,665
-1

Published on

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

Published in: Technology, Art & Photos
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,665
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide




  • CSS2 finished in 1998
  • <font> - let you figure that one out
    images - hard to maintain, not as accessible, potentially large
    web fonts - limited # of fonts, but the way it’s done today, in conjunction with cufon
  • FF3 released 6/08, FF 3.5 released 6/09, matter of months will be smaller. Chrome is growing, but new installs will support. Seems to have slower uptake. Is it a client site or personal? Who is the audience? Will your client understand if things don’t look exactly the same everywhere?
  • colamovies jan 2010. Important to look at your stats.
  • colamovies jan 2010. Important to look at your stats.
  • colamovies jan 2010. Important to look at your stats.


























































  • 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’.

    ×