How to Use Google Web Fonts

Introducing Google Web Fonts!


Google Web FontsI received an email today from the mighty “G” and Google’s webmaster central about the new Google Web Fonts. It seems that the elves at Google have recently completed an Internet beautification project. Aparantly they are tired of the old standard fonts like Times New Roman and Arial and have given webmasters a new tool to embed some really cool new fonts on their websites. What is the name of this new tool you ask?!? Well, it’s Google Web Fonts of course! And it does look pretty cool!

What is this “Google Web Fonts” that you speak of?

In the past, the only fonts webmasters could use safely and be assured that their web pages would display properly were standard fonts that were installed on ALL computers. These fonts were Times New Roman, Arial, Verdana, etc. Referencing any other font outside of these could lead to unpredictable page layouts when rendered in the various browsers of the world.

These Are Not the Fonts Your Looking For

If a webmaster were to reference a font on a web page, and that page was viewed on a computer that didn’t have the font installed, the browser would just use the nearest serif or san-serif font that it did have installed. This resulted in webmasters havng to embed text in an image or using something like flash to achieve the style they were looking for.

How Does Google Web Fonts Work?

To use Google Web Fonts, a webmaster simply needs to add a line of code in the header of every web page that you want to display these new fonts.  This line of code simply references a cascading style sheet (CSS)  hosted on Google’s servers.

Here’s an example:

<link  href="
regular" rel="stylesheet" type="text/css" >

In the above example the font Crafty Girls is to be used on the page. This line should be copied in the header (between the tags of your web page.

Then all you need to do is use normal style tags to create your style. This would also be added to the header of your page. Like this:

body {
  font-family: 'Crafty Girls', serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  text-shadow: 4px 4px 4px #bbb;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0.149em;
  word-spacing: -0.2em;
  line-height: 1.2;

Or you can add the style to a <div> tag:

<div style="font-family: 'Crafty Girls', serif;">Your text</div>

Pretty Cool HUH???

The Google Web Font Preview Tool

But if all of this “code” and CSS stuff has got you spooked.  Don’t worry. Google has made this easy for you too!  They’ve created a tool called the Google Web Font Preview Tool that allows you to simply copy and paste the font and style straight into your website or blog.

Check it out – it is very cool!  I can see a new WordPress plugin for this coming soon!!

Start experimenting with Google Web Fonts and give all your pages more style.


  1. Hey Joe, thanks for the tip. I am a web designer but I didn’t know about Google Web Fonts. I will definitely be implementing this into my latest designs. They have some nice fonts.

  2. Excellent! Never heard about this Google Web Fonts. I will be sure to use it! :)

  3. i am also a web designer .. and i am also dont know about this.. thank to share this post.. and waiting for the other grateful information from you

  4. Google fonts is new for me. after reading your post i know about the Google fonts. Please provide me more information on Google the fonts.
    Keep continue.

    Thank you

Leave a Reply