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/
Subscribe to:
Post Comments (Atom)
4 comments:
SVG is supported in IE9 now. Just though you'd like to know JK.
http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx?PageIndex=3
I just ran into a discussion of a nice web font, pt sans. I noticed it was working on a site even though I didn't have it and it did not appear to use the google method. I looked into how it was working and ran into this: http://www.fontsquirrel.com/fontface/generator and I guess it is like the google api service, a whole class of solutions called font as service(http://ilovetypography.com/2009/08/07/the-font-as-service/) Did you look into comparisons between the different providers?
also relevant and of concern is this reported un-ideal way google deals with italics:
http://readableweb.com/google-fonts-failing-for-internet-explorer-users/
Nice find with the fontsquirrel site. That looks like it could be really useful. Those typekits that are referenced in the second link are usually not free. They do offer free accounts but those accounts aren't worth it, IMO. They usually only give you like 2 fonts to use on only 1 site.
Post a Comment