Customize Fonts with Ease, Thanks to Google

Last May, Google announced a new font API that would help web designers and developers add beautiful typography to their webpages.

The new Font API has many welcomed benefits. Some include:

  • A choice of high quality open source fonts.
  • The need to create an image to fancy text to your page is no longer necessary.
  • Less images on a page means they will load faster.
  • Pages become more accessible and SEO-Friendly.
  • Works in most browsers.
  • Extremely easy to use and implement.

Google recently enhanced their Font Directory with a nifty new font previewer tool, which makes adding beautiful fonts to pages even easier than before!

To use it, simply follow these steps:

  1. Go to the Google Font Directory
  2. Select a font type from the list (in this example, I chose “Droid Sans
  3. Find the link that says “Preview this font
  4. Start customizing your font with the various tools.
    (Add shadow, word spacing, underline, change font size, etc.)
  5. When you’re happy with your customization, copy and paste the code below into your HTML file.

This image highlights the main options of the Google Font Previewer. On the left side, you can change the style of the font — from font family, size, to adding shadows, decoration, spacing, and more. On the right side, you can click on the text and change it to instantly preview your font. Feels like magic doesn’t it? On top of this section is a link to “Toggle controls.” Click on that and the controls are removed so you can see how the text would look on a webpage. And finally, the bottom part displays the code you can copy+paste into your document to for the font effects.

Google Font Previewer

Your HTML code should look something like this:

<title>My Sample Page</title>

<link  href="//,bold"
 rel="stylesheet" type="text/css">
body {
  font-family: 'Droid Sans', serif;
  font-size: 38px;
  font-style: normal;
  font-weight: 400;
  text-shadow: 8px 8px 8px #ddd;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1em;

My Sample Text

You can alter this code just like any other CSS file. For example, instead of the body tag having the attributes, you can add it to <h3> instead to have fancy headings on your pages.

One downside to the Google Font Directory is the lack of fonts available at this time. Hopefully they’ll add more in the future. All fonts are open source and you can freely use them in your webpages, documents, projects, as well as download a copy of them.

So what are you waiting for? Go out there and code away! I’m interested in knowing what kind of projects you use the Google Fonts in.

Further Reading

(Via Mashable)


  1. Bruce R. (BPR639Geek) says

    This is very good, I never thought of doing my fonts like this. I thought I could just change them in the given doc. or page. It will take me time to figure out the code & all that, I’m not a good code person, I still need help with those code puzzles on the back of cereal boxes. Thanks Daynah!!! “B”

  2. says

    OdinsBeard, I’m not sure you “get it.” There’s more to think about than merely whether the font file is bigger or smaller than graphic text. For one thing, search engines can’t indes graphical text. Second, as this option becomes more popular, it’s increasingly likely that the browser already has the font in its cache. Third, if the font isn’t in the browser’s cache then at least it will offload some of the HTTP request processing so your server has fewer requests to service in order to serve your page. Like everything in life, there are tradeoffs involved. There’s the possibility that a third party like Google may be inaccessible during the exact moment someone is trying to view your page. The graceful degradation path is that the user still has the text available, it just won’t look exactly the same as the designer intended. On balance I’d say the Google font service is a big win.

  3. OdinsBeard says

    This isn’t really ground breaking.
    All it does is force the user to download the font file, thereby allowing the webpage to use it.
    The likely reason there are so few fonts is that they have to be open-source otherwise it’s illegal to distribute them.
    Any web dev can do this with any font even without google, it’s the legal ramifications that stop them.

    • OdinsBeard says

      … also the size of the font file can out weight that of the graphical title version.