Tuesday, December 27, 2011

Google Web Fonts

Last May, Google introduced the Google Font Directory, a collection of high quality open source web fonts, and the Google Font API to make them available to everybody on the web. They had an initial rollout of 18 fonts and are frequently adding to that library.
As a web developer and typography nerd, this is an exciting service that Google is providing. If you’ve used Google Docs, you already have some experience with the use of the fonts.



No longer will sites need to be confined to the likes of Arial, Times New Roman, Georgia, et al. It should be noted that there’s nothing wrong with these fonts (except for Comic Sans). This service offers a library of wide-ranging types of fonts for designers to create without as many restrictions.
What browsers are supported?
The Google Web Fonts API is compatible with the following browsers:
  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+
Does the Google Web Fonts API work on mobile devices?
 - The Google Web Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

Implementation

It is easy to use a Google web font within your site.
  • Visit Google Web Fonts
  • Click on the font you’d like to use
  • Click the “Use this font” tab
  • Highlight and copy the LINK code provided
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
  • Paste the HTML code into your site. (The instructions state to paste it into the HEAD code, but I was able to get it to work successfully from within the BODY tag.)
  • Lastly, apply the font through CSS
h1 { font-family: 'Pacifico', arial, serif; }


Url: http://www.google.com/webfonts

No comments:

Post a Comment