new fonts for the web

  • 2,628 views
Uploaded on

my presentation about @font-face for barcamp london 7

my presentation about @font-face for barcamp london 7

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • http://www.fontmofo.com

    Over 13000 free fonts available for download now free of charge.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,628
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
28
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

Transcript

  • 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/
  • 6. so what‘s possible?
  • 7. http://nicewebtype.com/fonts/museo-and-sans/
  • 8. http://nicewebtype.com/fonts/bello-and-proxima-nova/
  • 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/
  • 15. converting to .eot
  • 16. Weft (not really) http://www.microsoft.com/typography/WEFT.mspx
  • 17. fontforge (otf to ttf) http://fontforge.sourceforge.net/
  • 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
  • 22. http://mindgarden.de
  • 23. it degrades gracefully:
  • 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
  • 29. http://img401.imageshack.us/img401/1355/newboingboing.jpg
  • 30. other issues with @font-face
  • 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/
  • 33. http://remysharp.com/2009/06/23/safaris-problem-with-font-face/
  • 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
  • 38. http://openfontlibrary.fontly.org/
  • 39. http://webfonts.info/
  • 40. http://www.theleagueofmoveabletype.com/
  • 41. http://www.fontsquirrel.com/
  • 42. services
  • 43. typekit.com
  • 44. http://www.typotheque.com/webfonts
  • 45. http://kernest.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?
  • 51. thanks! questions?
  • 52. slideshare.com/tobestobs marc tobias kunisch marctobiaskunisch.com @tobestobs