Font embedding for the web

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 deﬁne fallback fonts I am in “love” with people abusing quotation marks. ideal common font‐family: Didot, Garamond, "Times New Roman", serif; alternative generic

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 Courier New Georgia Impact Palatino Lucida Sans Tahoma Linotype Times New Trebuchet MS Roman Verdana

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 tools (Google Translate)✦ much decreased styling abilities

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‐family: Your‐font, Georgia, serif; }

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 */ }

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, 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/

Remember:Buying a font license doesn’t always let you use it on the web.

Browse www.fontspring.com and www.fontshop.com to ﬁnd professional fontsready for embedding for the web.

Thanks!http://www.slideshare.net/wojciechzajacWojtek Zajac (@theanxy) This work is licensed underwojtek@wojtekzajac.com a Creative Commons Attribution 3.0 Unported

http://lanyrd.com	20
http://paper.li	9
http://www.linkedin.com	2
http://twitter.com	1

Font embedding for the web

by Wojtek Zajac

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 32

Statistics