Google Web Fonts - cross platform web safe fonts, easy to use

Google Web Fonts - cross platform web safe fonts

When I first began to dabble with building websites I was quite excited about the possibility of using interesting fonts to make my pages look exactly how I wanted them to look. However, my excitement was short lived when I discovered that the browser I was using supported a relatively small number of fonts and even worse, people were using a variety of browsers and this restricted the number of actual common fonts even more.

Enter the term ‘web safe fonts’ and the boring world of Arial, Times New Roman, Verdana, Courier and Comic Sans (no one in their right mind uses that last font anyway!). There are a few more fonts that can be used safely and of course ways of getting custom fonts on you’re page, but it’s generally never been that straight forward and getting it to work across a large number of browsers is troublesome.

Google Web Fonts - making text come to life That all changed a while ago though with the introduction of Google Web Fonts. There are now literally hundreds of fonts for you to use and you can relax safe in the knowledge that you’re page will show fonts how you intended them to be displayed across a range of modern browsers including those on mobile platforms.

To get stared simply visit the Google Web Fonts home page and choose a font. There are a some tools to help give you an idea how that font will look on your pages. With the font previewer you can enter some text and adjust the size, width and line height; you can adjust the case and play around with some text decoration. This should help you get a feel for how the font will look with your text. There’s even a font previewer extension for Chrome which will show allow you to preview your current tab with any of these fonts.

Once you’ve decided on a font simply click on “use this font” and you’ll be given a short snipped of html to paste into the <head> element of your page. It’s basically one line of code and the Google API will do all the work to ensure that the correct CSS is set up for the visitor’s browser enabling the chosen font to be used. For example:

In you’re HTML all you have to do from then on to use the font is reference it in your CSS, for example:

h1 { font-family: 'Homemade Apple', arial, serif; }

It’s as simple as that. Now you can smarten up you’re pages and make them more interesting with the use of Google Web Fonts. For more specific information on implementing Google Web Fonts on your website please read the getting started guide and other documentation as required.

Google Web Fonts - cross platform web safe fonts

Other articles in this category