Web Fonts Dec

14, 2011

From Web-Safe fonts to Web Fonts Your computer is your license

Web-Safe Serif FontsSource: W3C

Web Fonts

CSS Cufon Google Fonts FHOS: Typekit, Fonts.com, etc

FHOS = Font Hosting and Obfuscation

CSS @font-face Rule

Since 1998 Began with CSS2, IE4 and the EOT format

(Embedded Open Type) http://lydiarobertsdesign.com/testground/webfonts/css.html

CSS @font-face Rule

Pros Free (if you already

own the font) Developer has total

control Most direct method of

delivering fonts

Cons Limited by how many

fonts you, the developer, possess

Backwards browser compatibility (IE8 and previous only support EOT)

The Big One: Legal Issues

CSS @font-face Rule

Endless possibilities... with limitations

@font-face not availableSource: Web Designer Wall

CSS @font-face Rule

Endless possibilities... with limitations

@font-face not availableSource: Web Designer Wall

CSS @font-face Rule

Source: http://caniuse.com/

Partial support from IE8 and previousPartial support from iOS and Android

Legal Concerns

“The arguments against web fonts are mostly legal. Fonts are intellectual property and therefore, the argument goes, cannot be published on the web.”

- A List Apart, August 2007

Author: Håkon Wium LieSource: http://www.alistapart.com/articles/cssatten

Which Leads us to...

CSS

Google Fonts Cufon FHOS: Typekit, Fonts.com, etc

Google Fonts

Since May 2010 All fonts hosted by Google http://lydiarobertsdesign.com/testground/w

ebfonts/googlefonts.html

Google Fonts

Pros Free to use Fonts are open source

and free to download Hosted by Google

(opposite of Cufon)

Cons Limited to 335 open

source fonts (as of this date)

Cufon

Since July 2009 Alternative to sIFR http://lydiarobertsdesign.com/testground/cufon.html

Cufon

Pros Free Makes fonts look pretty Supported by all major

browsers

Cons Does not support text

selection Does not support text-

decoration

Odd spacing issues can occur

What about upgrades?

Typekit

Founded 2008 Aquired by Adobe in 2011 http://lydiarobertsdesign.com/testground/webfon

ts/typekit.html

FHOS (Typekit, Fonts.com)

Pros Largest libraries of fonts

available (Fonts.com has 13,000!)

Easy interface and implementation

It's Legal

Cons Paid Service Loss of control Reliance on a

subscription for a basic website element – your fonts.

Worth Mentioning

CSS Google Fonts Cufon FHOS: Typekit, Fonts.com, etc

WebInkHas a plugin for Photoshop to allow you to use their

fonts in your designs

http://www.extensis.com/en/webfontplugin/

Worth Mentioning

FOUT = Flash of Unstyled Text

How to Fight FOUT: Adjust your CSS font stack Use WebFont Loader

http://code.google.com/apis/webfonts/docs/webfont_loader.html

Use CSS classes to refer to your active, loading, and failed-to-load fontshttp://blog.typekit.com/2010/11/02/font-events-fallback-fonts-and-styles-2/

Web Fonts

There are many options out there. Let's try them!

“...I expect that web authors will do what web authors have always done: Find a way to make it work. The raw materials are there. The tools are there. The workarounds are there. So put together some sample pages and templates, and prepare for the crossing. The time has arrived.”

- A List Apart, 2010

Author: Richard FinkSource: http://www.alistapart.com/articles/fonts-at-the-crossing/

ResourcesCSS

http://caniuse.com/

http://webdesignerwall.com/tutorials/css3-font-face-design-guide/

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

Google Fonts

http://www.google.com/webfonts

http://code.google.com/apis/webfonts/docs/webfont_loader.html

http://css-tricks.com/snippets/css/basics-of-google-font-api/

ttp://www.codestyle.org/

ResourcesCufon

http://cufon.shoqolate.com/generate/

http://web.tom1.org/wordpress/plugins/all-in-one-cufon/

http://fontforge.sourceforge.net/

Typekit/Fonts.com/WebInk

https://typekit.com/

http://blog.typekit.com/2010/11/02/font-events-fallback-fonts-and-styles-2/

http://webfonts.fonts.com/en-us/videotutorial

http://www.extensis.com/en/webfontplugin/