new fonts for the web
- 1. new fonts for the web october 2009, marctobiaskunisch.com
- 2. hi! i‘m tobs and i‘m a frontend developer for eConversions october 2009, marctobiaskunisch.com
- 3. i had my last cigarette on sunday october 2009, marctobiaskunisch.com
- 4. and i‘d like to talk a bit about @font-face october 2009, marctobiaskunisch.com
- 5. “ The @font-face rule allows for linking to fonts that are automatically activated when needed. This permits authors to work around the limitation of ‚web-safe‘ fonts, allowing for consistent rendering independent of the fonts available in a given user's environment. „ http://www.w3.org/TR/css3-fonts/
- 9. the css
- 10. @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.otf') format('opentype'); } h1 { font-face: 'Graublau Web', arial, sans-serif; }
- 11. browser support
- 12. TrueType OpenType PS Embedded Web Open Font (.ttf) (.otf) OpenType (.eot) Format (WOFF) http://webfonts.info/wiki/index.php?title=@font-face_browser_support
- 13. better css
- 14. @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot); src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.otf') format('opentype'); } h1 { font-face: 'Graublau Web', arial, sans-serif; } http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
- 18. TTF to EOT Font Converter http://www.kirsle.net/wizards/ttf2eot.cgi
- 19. or much easier:
- 20. Font Squirrel @font-face Kit Generator http://www.fontsquirrel.com/fontface/generator
- 21. the real world
- 24. unfortunately, not all fonts are made for the web
- 25. not all fonts come with hinting for the screen “ Font hinting is the use of mathematical instructions to adjust the display of an outline font so that it lines up with a rasterized grid. At small screen sizes, with or without antialiasing, hinting is critical for producing a clear, legible text for human readers. It is also known as instructing. „ http://en.wikipedia.org/wiki/Hinting
- 26. A font test with hinting (lower rows) and without hinting (upper rows) at 100% (above) and 400% (below). http://en.wikipedia.org/wiki/Hinting
- 27. ...plus file sizes, x-height, legibility...
- 28. what boing boing did wrong
- 31. fout (flash of unstyled text)
- 32. • re-rendered text - Firefox renders text using a default font while the @font-face file is being downloaded. Once the font file is downloaded, Firefox re-renders the text using the correct font. • invisible text - Most other browsers don’t draw the text at all until the font is downloaded. http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
- 34. • IE doesn’t render anything in the page until the font file is done downloading if there is a SCRIPT tag above the @font-face declaration. http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
- 35. licensing
- 36. • WOFF to the rescue? • font foundries slowly realizing there are opportunities in web fonts • always read the EULA
- 37. resources
- 42. services
- 43. typekit.com
- 46. but keep in mind: typography takes some skill (remember those animated gifs?)
- 47. just imagine people starting to embed comic sans into their websites
- 48. so catch up on your reading http://webtypography.net/intro/
- 49. I think this will change the web...
- 50. ...in a good way don‘t you?
- 52. slideshare.com/tobestobs marc tobias kunisch marctobiaskunisch.com @tobestobs