What the @font-face

  • 11,277 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,277
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
34
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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.


























































Transcript

  • 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. 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. Can we use it?
  • 4. colamovies.com 28,766 Visitors
  • 5. midlandsbiz.com 10,253 Visitors
  • 6. unmatchedstyle.com 35,400 Visitors
  • 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. Not so fast!
  • 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. 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. 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. 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. 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. 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. 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. Browser Differences Firefox Mac IE/FF XP with Cleartype Firefox XP w/o Cleartype IE6 w/o Cleartype
  • 17. IE Jaggy Fix p { filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  • 18. IE Jaggy Fix p { filter: alpha(opacity=100); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }
  • 19. FOUT • Flash of unstyled text • Webkit hides font
  • 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. Without base64 encoding
  • 22. Without base64 encoding
  • 23. Without base64 encoding
  • 24. Without base64 encoding
  • 25. With base64 encoding
  • 26. With base64 encoding
  • 27. With base64 encoding
  • 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. Subset Fonts fontsquirrel @font-face generator http://www.fontsquirrel.com/fontface/generator
  • 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. My @font-face site: petridisc.com Resources & Tools fontsquirrel.com webfonts.info paulirish.com typekit.com webfontspecimen.com Get crackin’.