new fonts for the web

october 2009, marctobiaskunisch.com

hi!i‘m tobs and i‘m a frontenddeveloper 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(.ttf)

OpenType PS (.otf)

Embedded OpenType (.eot)

http://webfonts.info/wiki/index.php?title=@font-face_browser_support

Web Open Font Format (WOFF)

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

http://www.microsoft.com/typography/WEFT.mspx

Weft(not really)

http://fontforge.sourceforge.net/

fontforge(otf to ttf)

http://www.kirsle.net/wizards/ttf2eot.cgi

TTF to EOT Font Converter

or much easier:

http://www.fontsquirrel.com/fontface/generator

Font Squirrel@font-face Kit 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

http://en.wikipedia.org/wiki/Hinting

A font test with hinting (lower rows) and without

hinting (upper rows) at 100% (above) and 400% (below).

...plus file sizes, x-height, legibility...

what

boing boingdid 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 waydon‘t you?

thanks!questions?

slideshare.com/tobestobs

marc tobias kunischmarctobiaskunisch.com

@tobestobs