Font embedding for the webPOZNAN, 18.06.2011     Wojtek Zajac.com
Disclaimer    I am:✦   NOT a native english speaker ☺✦   NOT a typographer✦   Web Designer & Developer
What is a CSS font stack?
A way to define fallback fonts      I am in “love” with people abusing quotation marks.                  ideal             ...
For years,we’ve been limited to a small set of “web safe” fonts.
Fonts existing on 95% of PCs                    Arial       Arial                     Comic Sans                    Black ...
So, we’ve had to come upwith some workarounds.  (old-school methods)
2003: CSS Image Replacement     Credits: Dave Shea
2005: sIFR   (Scalable Inman Flash Replacement)
2008: Cufón
None of them was perfect✦   poor accessibility✦   broken built-in browser search✦   inability to use live translating tool...
The winner is:CSS3 @font-face
Learn a new CSS3 @font-facesyntax @font‐face
{ 

font‐family:
Your‐font; 

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

font‐...
Make it bulletproof(yes, you can use it today)  @font‐face
{  

font‐family:
Tagesschrift;  

src:
url(tagesschrift.eot);
...
Or just use the Font Squirrel generator Font Squirrel generator
Problem?Licenses
Use web font hosting services   popular, the simplest to use                  personal (free) and paid accounts   small, c...
Remember:Buying a font license doesn’t always     let you use it on the web.
Browse www.fontspring.com     and www.fontshop.com    to find professional fontsready for embedding for the web.
Thanks!http://www.slideshare.net/wojciechzajacWojtek Zajac (@theanxy)                     This work is licensed           ...
Upcoming SlideShare
Loading in...5
×

Font embedding for the web

2,914

Published on

Published in: Design
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,914
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
1
Likes
2
Embeds 0
No embeds

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
  • 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
    1. ¿Le ha llamado la atención una diapositiva en particular?

      Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

    ×