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.

Font embedding for the web

3,311 views

Published on

Published in: Design

Font embedding for the web

  1. 1. Font embedding for the webPOZNAN, 18.06.2011 Wojtek Zajac.com
  2. 2. Disclaimer I am:✦ NOT a native english speaker ☺✦ NOT a typographer✦ Web Designer & Developer
  3. 3. What is a CSS font stack?
  4. 4. A way to define fallback fonts I am in “love” with people abusing quotation marks. ideal common font‐family:
Didot,
Garamond,
"Times
New
Roman",
serif; alternative generic
  5. 5. For years,we’ve been limited to a small set of “web safe” fonts.
  6. 6. Fonts existing on 95% of PCs Arial Arial Comic Sans Black Courier New Georgia Impact Palatino Lucida Sans Tahoma Linotype Times New Trebuchet MS Roman Verdana
  7. 7. So, we’ve had to come upwith some workarounds. (old-school methods)
  8. 8. 2003: CSS Image Replacement Credits: Dave Shea
  9. 9. 2005: sIFR (Scalable Inman Flash Replacement)
  10. 10. 2008: Cufón
  11. 11. None of them was perfect✦ poor accessibility✦ broken built-in browser search✦ inability to use live translating tools (Google Translate)✦ much decreased styling abilities
  12. 12. The winner is:CSS3 @font-face
  13. 13. Learn a new CSS3 @font-facesyntax @font‐face
{ 

font‐family:
Your‐font; 

src:
url(Your‐font.ttf); } h1,
h2,
h3
{ 

font‐family:
Your‐font,
Georgia,
serif; }
  14. 14. Make it bulletproof(yes, you can use it today) @font‐face
{ 

font‐family:
Tagesschrift; 

src:
url(tagesschrift.eot);
/*
IE
5‐8
*/
 

src:
local(☺),












/*
sneakily
trick
IE
*/ 







url(tagesschrift.woff)
format(woff),



/*
FF
3.6,
Chrome
5,
IE9
*/ 







url(tagesschrift.ttf)
format(truetype),
/*
Opera,
Safari
*/ 







url(tagesschrift.svg#font)
format(svg);
/*
iOS
*/ }
  15. 15. Or just use the Font Squirrel generator Font Squirrel generator
  16. 16. Problem?Licenses
  17. 17. Use web font hosting services popular, the simplest to use personal (free) and paid accounts small, curated set of freely licensed fonts wide range of fonts, mobile support over 10000 fonts to choose from annual fee extensive localization support doesn’t support desktop useMore: http://sprungmarker.de/wp-content/uploads/webfont-services/
  18. 18. Remember:Buying a font license doesn’t always let you use it on the web.
  19. 19. Browse www.fontspring.com and www.fontshop.com to find professional fontsready for embedding for the web.
  20. 20. Thanks!http://www.slideshare.net/wojciechzajacWojtek Zajac (@theanxy) This work is licensed underwojtek@wojtekzajac.com a Creative Commons Attribution 3.0 Unported

×