Using Web Fonts Now

Using Web Fonts Now Greg Veen, 26 October 2010, Adobe MAX

Hello, I’m Greg Veen Web designer and developer Now: Co-founder, Before: Twitter, Google, Monster.com...

@gregveen

@gregveen #adobemax-webfonts

j.mp/adobemax- webfonts

Agenda History Web font formats and browsers How to use web fonts How to use web fonts well Q&A

600 years of typography

thousands of fonts

1993: no fonts

2008: 18 fonts

today: new browsers

“The emerging @font-face tag within Cascading Style Sheets (CSS) will hopefully lead to a secure technology that allows fonts to be used in web pages. But at this time, no such security measures exist, so the use of this tag with our fonts constitutes the illegal distribution of the font software. This type of use is therefore speciﬁcally prohibited under our End-User License Agreement.”

formats

OTF SVG WOFF EOT formats

OTF/ SVG WOFF EOT TTF IE9 IE9 IE5+ FF3.5 FF3.5 FF3.6 Chrome 4 Chrome 0.3 Chrome 5 Safari 3.1 Safari 3.1 Opera 10 Opera 9 iOS 1 2.2 browsers

But what about old browsers?

How do I use web fonts?

@font-face { font-family: 'Awesome New Font'; src: url('awesome-new-font.ttf'); }

@font-face { font-family: 'Awesome New Font'; src: url('awesome-new-font.ttf'); } h1 { font-family: 'Awesome New Font', 'Georgia', serif; }

@font-face { font-family: 'Awesome New Font'; src: url('awesome-new-font.eot'); /* IE 5-8 */ src: local('☺'), /* sneakily trick for IE */ url('awesome-new-font.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */ url('awesome-new-font.ttf') format('truetype'), /* Opera, Safari */ url('awesome-new-font.svg#font') format('svg'); /* iOS */ }

Where do I get web fonts?

Host your own Free: Font Squirrel, League of Moveable Type, exljbris... Professional: Font Shop, Process, Font Spring...

Web Font Services Free: Google WebFont API, trial accounts at paid services Professional: Typekit, WebINK, Fonts Live, FontDeck, Fonts.com...

How to host your own

@font-face { font-family: 'FF Meta Web'; src: url('ff-meta-web.woff'); }

@font-face { font-family: 'Awesome New Font'; src: url('ff-meta-web.eot'); /* IE 5-8 */ src: local('☺'), /* sneakily trick for IE */ url('ff-meta-web.woff') format('woff'); /* FF 3.6, Chrome 5, IE9 */ }

@font-face { font-family: 'Awesome New Font'; src: url('ff-meta-web.eot'); /* IE 5-8 */ src: local('☺'), /* sneakily trick for IE */ url('ff-meta-web.woff') format('woff'); /* FF 3.6, Chrome 5, IE9 */ } (No Safari, iOS, Opera...)

h1 { font-family: 'FF Meta Web', 'Georgia', serif; }

How do I use a web font service?

typekit.com @typekit

How do I use web fonts well?

rendering

Core Text Core Text

Core Text DirectWrite

GDI + Core Text ClearType

Core Text GDI + Standard

Core Text GDI + no antialiasing

Flash of unstyled text

“Radical Web Typography”

h1.fancy_title .char3, h1.fancy_title .char4 { position: relative; top: -10px; }

Thank you!

Questions? Comments?

@gregveen j.mp/adobemax- webfonts

Using Web Fonts Now

by Greg Veen

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 21

Statistics

Using Web Fonts Now Presentation Transcript