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