1 / 20

Web Fonts Dec 14, 2011

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

conor
Download Presentation

Web Fonts Dec 14, 2011

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Fonts Dec 14, 2011 From Web-Safe fonts to Web Fonts Your computer is your license Web-Safe Serif Fonts Source: W3C

  2. Web Fonts CSS Cufon Google Fonts FHOS: Typekit, Fonts.com, etc FHOS = Font Hosting and Obfuscation

  3. CSS @font-face Rule Since 1998 Began with CSS2, IE4 and the EOT format (Embedded Open Type) http://lydiarobertsdesign.com/testground/webfonts/css.html

  4. 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

  5. CSS @font-face Rule Endless possibilities... with limitations @font-face not available Source: Web Designer Wall

  6. CSS @font-face Rule Endless possibilities... with limitations @font-face not available Source: Web Designer Wall

  7. CSS @font-face Rule Partial support from IE8 and previous Partial support from iOS and Android Source: http://caniuse.com/

  8. 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

  9. Which Leads us to... CSS Google Fonts Cufon FHOS: Typekit, Fonts.com, etc

  10. Google Fonts Since May 2010 All fonts hosted by Google http://lydiarobertsdesign.com/testground/webfonts/googlefonts.html

  11. 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)

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

  13. 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?

  14. Typekit Founded 2008 Aquired by Adobe in 2011 http://lydiarobertsdesign.com/testground/webfonts/typekit.html

  15. 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.

  16. 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/

  17. 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/

  18. 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/

  19. 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/

  20. 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/

More Related