Your SlideShare is downloading. ×
0
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Font embedding for the web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Font embedding for the web

2,858

Published on

Published in: Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,858
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
1
Likes
2
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
  • \n
  • At the beginning I will say that I am not a native english speaker, not a typographer.\n\nI am, though, a web designer & developer from Krakow.\n
  • Please raise your hands: how many of you know what is a CSS font stack?\n
  • CSS Fonts is a way to define fonts that are displayed if our desired font isn’t installed in users’ machine.\nIt defines the preferred order of “back up” fonts to use.\nIt should always end with a generic font-family.\n
  • Web designers are often constrained by the so called “Web Safe Fonts” when creating web pages and whilst 95% of machines worldwide now have these fonts, they were first packaged with Windows XP back in 2001.\n
  • These fonts exist on 95% of the machines. Of course it varies basing on the Operating System.\nAlso, devices like iPhone / iPad have much limited font set as well.\nYou will probably agree with me that these fonts are plainly overused.\n
  • \n
  • In early 2000s, we used various ways of image replacement. They could be generated dynamically to serve custom text and avoid generating it in advance.\nProblems with: transparency\n
  • Then, Mike Davidson basing on the work of Shaun Inman published sIFR, a way to embed custom fonts to sites using Flash.\nThis solved a problem for some time, but the fonts couldn’t be used for body text. \nAlso, the flash text isn’t working for mobile devices.\n
  • In 2008, Cufon came out and designers were very excited about it again.\nUnfortunately, this solution based on HTML Canvas, which is just a hack.\n
  • \n
  • \n
  • Here is the new CSS3 syntax for embedding the fonts.\n
  • There are 4 different types of formats for various browsers: otf&ttf, svg, woff and eot.\nThese different formats were caused by the differences of the browser vendors politics.\n
  • Font Squirrel will let you get the generated files and the CSS ruleset\n
  • Unfortunately, there is a problem with licenses.\nEmbedding font via @font-face means anybody can download it even if the font license forbids it.\n
  • The solution: thankfully there are companies which will host the web fonts to you so you don’t have to care about the licensing problems.\nThe most popular are Google Web Fonts, Typekit, Fonts.com and Font Deck.\n
  • \n
  • \n
  • \n
  • Transcript

    • 1. Font embedding for the webPOZNAN, 18.06.2011 Wojtek Zajac.com
    • 2. Disclaimer I am:✦ NOT a native english speaker ☺✦ NOT a typographer✦ Web Designer & Developer
    • 3. What is a CSS font stack?
    • 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. For years,we’ve been limited to a small set of “web safe” fonts.
    • 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. So, we’ve had to come upwith some workarounds. (old-school methods)
    • 8. 2003: CSS Image Replacement Credits: Dave Shea
    • 9. 2005: sIFR (Scalable Inman Flash Replacement)
    • 10. 2008: Cufón
    • 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. The winner is:CSS3 @font-face
    • 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. 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. Or just use the Font Squirrel generator Font Squirrel generator
    • 16. Problem?Licenses
    • 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. Remember:Buying a font license doesn’t always let you use it on the web.
    • 19. Browse www.fontspring.com and www.fontshop.com to find professional fontsready for embedding for the web.
    • 20. Thanks!http://www.slideshare.net/wojciechzajacWojtek Zajac (@theanxy) This work is licensed underwojtek@wojtekzajac.com a Creative Commons Attribution 3.0 Unported

    ×