• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
new fonts for the web

new fonts for the web



my presentation about @font-face for barcamp london 7

my presentation about @font-face for barcamp london 7



Total Views
Views on SlideShare
Embed Views



7 Embeds 132

http://www.mindgarden.de 59
http://mindgarden.de 51
http://www.slideshare.net 10
http://lanyrd.com 8
http://mindgarden.lwsrc.net 2
applewebdata://61E78205-5DEF-4779-8178-D213D63FD5FA 1
http://www.linkedin.com 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


11 of 1 previous next

  • 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
Post Comment
Edit your comment

    new fonts for the web new fonts for the web Presentation Transcript

    • 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 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/
    • 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: 'Graublau Web', arial, sans-serif; }
    • browser support
    • TrueType OpenType PS Embedded Web Open Font (.ttf) (.otf) OpenType (.eot) Format (WOFF) http://webfonts.info/wiki/index.php?title=@font-face_browser_support
    • better css
    • @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/
    • 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 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
    • A font test with hinting (lower rows) and without hinting (upper rows) at 100% (above) and 400% (below). http://en.wikipedia.org/wiki/Hinting
    • ...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 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/
    • 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 tag above the @font-face declaration. http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/
    • 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