web fonts dec 14, 2011
DESCRIPTION
Web Fonts Dec 14, 2011. From Web-Safe fonts to Web Fonts Your computer is your license. Web-Safe Serif Fonts Source: W3C. Web Fonts. CSS Cufon Google Fonts FHOS: Typekit, Fonts.com, etc FHOS = Font Hosting and Obfuscation. CSS @font-face Rule. Since 1998 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/1.jpg)
Web Fonts Dec
14, 2011
From Web-Safe fonts to Web Fonts Your computer is your license
Web-Safe Serif FontsSource: W3C
![Page 2: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/2.jpg)
Web Fonts
CSS Cufon Google Fonts FHOS: Typekit, Fonts.com, etc
FHOS = Font Hosting and Obfuscation
![Page 3: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/3.jpg)
CSS @font-face Rule
Since 1998 Began with CSS2, IE4 and the EOT format
(Embedded Open Type) http://lydiarobertsdesign.com/testground/webfonts/css.html
![Page 4: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/4.jpg)
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
![Page 5: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/5.jpg)
CSS @font-face Rule
Endless possibilities... with limitations
@font-face not availableSource: Web Designer Wall
![Page 6: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/6.jpg)
CSS @font-face Rule
Endless possibilities... with limitations
@font-face not availableSource: Web Designer Wall
![Page 7: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/7.jpg)
CSS @font-face Rule
Source: http://caniuse.com/
Partial support from IE8 and previousPartial support from iOS and Android
![Page 8: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/8.jpg)
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
![Page 9: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/9.jpg)
Which Leads us to...
CSS
Google Fonts Cufon FHOS: Typekit, Fonts.com, etc
![Page 10: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/10.jpg)
Google Fonts
Since May 2010 All fonts hosted by Google http://lydiarobertsdesign.com/testground/w
ebfonts/googlefonts.html
![Page 11: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/11.jpg)
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)
![Page 12: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/12.jpg)
Cufon
Since July 2009 Alternative to sIFR http://lydiarobertsdesign.com/testground/cufon.html
![Page 13: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/13.jpg)
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?
![Page 14: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/14.jpg)
Typekit
Founded 2008 Aquired by Adobe in 2011 http://lydiarobertsdesign.com/testground/webfon
ts/typekit.html
![Page 15: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/15.jpg)
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.
![Page 16: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/16.jpg)
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/
![Page 17: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/17.jpg)
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/
![Page 18: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/18.jpg)
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/
![Page 19: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/19.jpg)
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/
![Page 20: Web Fonts Dec 14, 2011](https://reader035.vdocuments.site/reader035/viewer/2022062409/56814dd1550346895dbb2e6f/html5/thumbnails/20.jpg)
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/