Font embedding for the web
2 likes1,500 views
This document discusses font embedding for the web. It provides an overview of the history of font embedding techniques, including CSS image replacement, sIFR, and Cufón, and their limitations. The document argues that @font-face in CSS3 is the best current solution, allowing any font to be embedded while maintaining accessibility, searchability, and translation. It provides examples of how to implement @font-face and considerations for font licensing when embedding for the web.
Font embedding for the web
- 1. Font embedding for the web POZNAN, 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 up with 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-face syntax @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
- 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 use More: 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 fonts ready for embedding for the web.
- 20. Thanks! http://www.slideshare.net/wojciechzajac Wojtek Zajac (@theanxy) This work is licensed under wojtek@wojtekzajac.com a Creative Commons Attribution 3.0 Unported
Editor's Notes
- #2: \n
- #3: 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
- #4: Please raise your hands: how many of you know what is a CSS font stack?\n
- #5: 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
- #6: 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
- #7: 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
- #8: \n
- #9: 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
- #10: 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
- #11: 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
- #12: \n
- #13: \n
- #14: Here is the new CSS3 syntax for embedding the fonts.\n
- #15: 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
- #16: Font Squirrel will let you get the generated files and the CSS ruleset\n
- #17: 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
- #18: 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
- #19: \n
- #20: \n
- #21: \n