Transcript Google Fonts

Web Fonts

From Web-Safe fonts to Web Fonts

Your computer is your license
Web-Safe Serif Fonts
Source: W3C
Dec 14, 2011
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 available
Source: Web Designer Wall
CSS @font-face Rule

Endless possibilities... with limitations
@font-face not available
Source: Web Designer Wall
CSS @font-face Rule
Partial support from IE8 and previous
Partial support from iOS and Android
Source: http://caniuse.com/
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 Lie
Source: 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 textdecoration
Odd spacing issues can occur
What about upgrades?
Typekit

Founded 2008

Aquired by Adobe in 2011

http://lydiarobertsdesign.com/testground/webfont
s/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

WebInk
Has 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 fonts
http://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 Fink
Source: http://www.alistapart.com/articles/fonts-at-the-crossing/
Resources
CSS
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/
Resources
Cufon
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/