Google Web Fonts – making web typography easy

Web designers have been stuck having to use the same old web safe fonts for almost 20 years now, and although the classic web safe fonts like Arial, Times New Roman, Verdana and Georgia still have their place, understandably everyone is getting a little sick of having to use them for everything on their site.

Of course, saving these fonts as images has always worked in the past for headings, but is not good practice for SEO purposes, as search engine crawlers can’t read the text in an image.

Fortunately, it’s now really easy to get a wealth of custom web fonts on your site, as Google has provided their Google Web Fonts tool free of charge, with 238 different font families currently available.

Google Web Fonts

Google lets you add as many fonts as you want to a collection

Adding the fonts to your site is a simple matter of embedding a CSS link in the <head> of your HTML document, eg.

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

And then simply adding the font to your stylesheet just like any other font, eg.

h1 { font-family: 'Droid Sans', sans-serif; }

This would style all h1 elements on your site with the Google Web Font Droid Sans.

How do you rate this?


Add New Comments

Showing 2 Comments

  1. thanks for sharing this. it really get’s easier these days 🙂 but since @font-face hit the web some time ago, typography made a leap forward. and although 238 fonts sounds like a lot, you still have even bigger flexibility with @font-face (albeit you have to take care of licensing issues, and of course, IE needs some special attention, but that comes as no surprise)…

  2. Browsing Ideas

    True that @font-face has been available in CSS for a while, but we really like Google web fonts. Here are some handy pros and cons of both approaches:

    Google Web Fonts
    Pros
    Free solution from Google.
    Quick set up.
    No JavaScript dependency.
    No need to think about font licensing.

    Cons
    Small number of fonts to choose from. (just for now, hopefully)
    Quality of font rendering may differ browser to browser.

    @font-face
    Pros
    A lot of available fonts you can choose from.
    It has no JavaScript dependency.

    Cons
    It takes slightly longer to implement than Google Font API (more code).
    Quality of font rendering may differ browser to browser.
    Your CSS may not be validated, depending on your DOCTYPE.
    Copyright issues.

    These pros and cons courtesy of http://www.red-team-design.com/google-font-api-and-typekit-solutions-vs-font-face