Showing posts with label google. Show all posts
Showing posts with label google. Show all posts

Tuesday, October 26, 2010

Google Font API

I have been researching ways to increase the list of typography that is available for us as web designers. If you are not aware browsers can use only the fonts installed in each computer, so it means that every visitor of your web page needs to have all the fonts you want to use installed in his/her computer. These fonts are called web safe fonts and include arial, times new roman, courier new, helvetica, Georgia, and the list goes on.

What this means is if you download a font from a free website and decide to use it for all your main headings for example, you should be aware that unfortunately not everybody will be able to view your masterpiece the way you created it. What happens when a font is not present? The browser will replace them with some other fonts that are already installed on your computer.

There are some ways around this. You can use SVGs or image replacement but they aren't always the best solution. SVGs are not embraced by all browsers (I am looking at you Internet explorer!) and image replacement can be a pain for screen readers to process. There are also a variety of typekits that you can incorporate in your site but they are not free.

I have been playing around with Google's font API. Its free and easy to use and I think it is something we could use to add some new fonts to our sites. Google Font API is still pretty young and in time I hope they add more fonts. Check out this example below to see what I am talking about.

test site

To use this service you need to add a stylesheet link in your head tag. Then add the fonts you want to request from the google server. Something to keep in mind is for every font you want to use you need to make a http request. Too many of these can slow your site down.
javascript:void(0)
Another thing to keep in mind is if you want to use a font and a bold variant of that font you need to make 2 requests to the server. One for the regular font and one for the bold font.

Below is the link to the google site which includes all the information you would need to use this, including, the font directory and examples. I also included a link to a blog post containing some tips and more information. Let me know if anyone has any questions.
http://code.google.com/apis/webfonts/
http://sixrevisions.com/web_design/google-font-api-guide/