my presentation about @font-face for barcamp london 7

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