Google Webfonts

Sometimes we would like or blogposts to stand out in one way or the other. By using google webfonts we can make our posts look a bit more interesting, or even handwritten. We can do this globally, on our entire blog, or we can make just a few paragraphs handwritten.

Like this handwritten note.

We can also use more than one font in the same blogpost.

Here's a simple primer for how to accomplish this.


First of all we need to find the font we wish to use...
So head on over to Google Webfonts and look for the perfect font for your site. You should be viewing a site much like this one after you switch from Word-tab to the Sentence-tab:

Use the left side menu to narrow your search for a font you'd like to use.
At the end of the font examples you'll see 3 links, not shown on this picture.
Click on the Quick-use link and scroll down on the next page.
There you will find a blue field with 3 tabs. On the Standard tab you are instructed to add this code to your website:

<link href='http://fonts.googleapis.com/css?family=The+Girl+Next+Door'
 rel='stylesheet' type='text/css' />

Mark the text and copy it.

Second part is to include this into the HTML of your page or website.
Open the page you want to include this font into and add the link-tag into the head section. Save the file.

Third step is adding code to use the font on your entire site or just the paragraphs or pages you want.
One of my preferred methods are by creating class-names I can easily use on a page or a paragraph.
Add the following to your css-file:

.handwritten { font-family: 'The Girl Next Door', Arial; }

The following code:

<span class="handwritten">With this in place you are ready to use a div, 
span or any valid html element in your page or site to use 
the webfont in question.</span>

Will produce the following output:
With this in place you are ready to use a div, span or any valid html element in your page or site to use the webfont in question.

So now you are ready to use all sorts of cool fonts on your site. Just remember that this will have an impact on how quickly your site is loaded.