new fonts
for the web


         october 2009, marctobiaskunisch.com
hi!
i‘m tobs and i‘m a frontend
developer for eConversions



                   october 2009, marctobiaskunisch.com
i had my last cigarette
      on sunday




                 october 2009, marctobiaskunisch.com
and i‘d like to talk a
bit about @font-face




                october 2009, marctobiaskunisch.com
“     The @font-face rule allows for linking to fonts that are
          automatically activated when needed. This permits...
so what‘s possible?
http://nicewebtype.com/fonts/museo-and-sans/
http://nicewebtype.com/fonts/bello-and-proxima-nova/
the css
@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.otf') format('opentype');
}

h1 {
  font-face: 'Graubl...
browser support
TrueType     OpenType PS    Embedded           Web Open Font
                        (.ttf)       (.otf)         OpenType ...
better css
@font-face {
        font-family: 'Graublau Web';
        src: url('GraublauWeb.eot);
        src: local('Graublau Web Reg...
converting to .eot
Weft
(not really)




http://www.microsoft.com/typography/WEFT.mspx
fontforge
(otf to ttf)




http://fontforge.sourceforge.net/
TTF to EOT Font Converter




http://www.kirsle.net/wizards/ttf2eot.cgi
or much easier:
Font Squirrel
@font-face Kit Generator




http://www.fontsquirrel.com/fontface/generator
the real world
http://mindgarden.de
it degrades gracefully:
unfortunately,
not all fonts are
made for the web
not all fonts come with
  hinting for the screen

   “    Font hinting is the use of mathematical instructions to
        ...
A font test with hinting
           (lower rows) and without
       hinting (upper rows) at 100%
          (above) and 400...
...plus file sizes, x-height, legibility...
what
boing boing
  did wrong
http://img401.imageshack.us/img401/1355/newboingboing.jpg
other issues
with @font-face
fout
(flash of unstyled text)
• re-rendered text - Firefox renders text using a
          default font while the @font-face file is being
          down...
http://remysharp.com/2009/06/23/safaris-problem-with-font-face/
• IE doesn’t render anything in the page until the
              font file is done downloading if there is a SCRIPT
      ...
licensing
• WOFF to the rescue?
• font foundries slowly realizing there are
  opportunities in web fonts

• always read the EULA
resources
http://openfontlibrary.fontly.org/
http://webfonts.info/
http://www.theleagueofmoveabletype.com/
http://www.fontsquirrel.com/
services
typekit.com
http://www.typotheque.com/webfonts
http://kernest.com
but keep in mind:

typography takes some skill
     (remember those animated gifs?)
just imagine people starting to embed
comic sans into their websites
so catch up on your reading




http://webtypography.net/intro/
I think

this will change the web...
...in a good way
     don‘t you?
thanks!
  questions?
slideshare.com/tobestobs
      marc tobias kunisch
     marctobiaskunisch.com
          @tobestobs
Upcoming SlideShare
Loading in...5
×

new fonts for the web

2,824

Published on

my presentation about @font-face for barcamp london 7

Published in: Technology, Art & Photos
1 Comment
2 Likes
Statistics
Notes
  • http://www.fontmofo.com

    Over 13000 free fonts available for download now free of charge.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,824
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
33
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

new fonts for the web

  1. 1. new fonts for the web october 2009, marctobiaskunisch.com
  2. 2. hi! i‘m tobs and i‘m a frontend developer for eConversions october 2009, marctobiaskunisch.com
  3. 3. i had my last cigarette on sunday october 2009, marctobiaskunisch.com
  4. 4. and i‘d like to talk a bit about @font-face october 2009, marctobiaskunisch.com
  5. 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. 6. so what‘s possible?
  7. 7. http://nicewebtype.com/fonts/museo-and-sans/
  8. 8. http://nicewebtype.com/fonts/bello-and-proxima-nova/
  9. 9. the css
  10. 10. @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.otf') format('opentype'); } h1 { font-face: 'Graublau Web', arial, sans-serif; }
  11. 11. browser support
  12. 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. 13. better css
  14. 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. 15. converting to .eot
  16. 16. Weft (not really) http://www.microsoft.com/typography/WEFT.mspx
  17. 17. fontforge (otf to ttf) http://fontforge.sourceforge.net/
  18. 18. TTF to EOT Font Converter http://www.kirsle.net/wizards/ttf2eot.cgi
  19. 19. or much easier:
  20. 20. Font Squirrel @font-face Kit Generator http://www.fontsquirrel.com/fontface/generator
  21. 21. the real world
  22. 22. http://mindgarden.de
  23. 23. it degrades gracefully:
  24. 24. unfortunately, not all fonts are made for the web
  25. 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. 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. 27. ...plus file sizes, x-height, legibility...
  28. 28. what boing boing did wrong
  29. 29. http://img401.imageshack.us/img401/1355/newboingboing.jpg
  30. 30. other issues with @font-face
  31. 31. fout (flash of unstyled text)
  32. 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. 33. http://remysharp.com/2009/06/23/safaris-problem-with-font-face/
  34. 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. 35. licensing
  36. 36. • WOFF to the rescue? • font foundries slowly realizing there are opportunities in web fonts • always read the EULA
  37. 37. resources
  38. 38. http://openfontlibrary.fontly.org/
  39. 39. http://webfonts.info/
  40. 40. http://www.theleagueofmoveabletype.com/
  41. 41. http://www.fontsquirrel.com/
  42. 42. services
  43. 43. typekit.com
  44. 44. http://www.typotheque.com/webfonts
  45. 45. http://kernest.com
  46. 46. but keep in mind: typography takes some skill (remember those animated gifs?)
  47. 47. just imagine people starting to embed comic sans into their websites
  48. 48. so catch up on your reading http://webtypography.net/intro/
  49. 49. I think this will change the web...
  50. 50. ...in a good way don‘t you?
  51. 51. thanks! questions?
  52. 52. slideshare.com/tobestobs marc tobias kunisch marctobiaskunisch.com @tobestobs
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×