How to Use Google Fonts With Dolphin 7

Google released an API that will allow you to break free from the confines of the standard fonts. Using Google fonts API, you can use a custom font on your site titles. For example, I chose a font called Lobster. Here's what my page looks like:

Notice the blog titles. It's that coolio lobster font. You can check it out the sample at my Dolphin Tutorial site.

I'm going to show you how to do the same. The same principles apply to all the other fonts and you just need to target the CSS.

1. At this time, the selection of fonts is limited compared to other services out there, but for a free service, it's pretty good. For now, pick a font you like by going here:

https://fonts.google.com

As of May 21, 2010, here's what on the menu:

The above is a list of currently available fonts. In future, Google may decide to add more.

2. If you rollover the fonts in the list, it will hilite and you will see the "Click to embed ..." link. In my case, the most interesting one is called Lobster. 

3. It will then load a page about the font with some info about the font you just chose. For example, Lobster was created by Pablo Impallari.

Clicking on character set gives you a sample of what each character looks like. For example:

Click on Description and you get a description of the font. For example:

But really what we're after is the code. Wer'e going to do that next.

5. Click on the Get the Code tab. You should see something that looks like this:

6. Copy the line:

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

We will need to put that in the header part of our Web page.

Take note of the usage. For example:

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

7. Now that we have the code, we need to know where to put it. That really is the big trick with this stuff. You might have the code, but if you don't  know where to put it, then it's pretty useless. I'm going to show that to you now.

For this tutorial, I am going to change the font that display the titles in the in the blog. I am using FireBug to target the font and get some information so I can change and manipulate it. You can download FireBug from:

http://getfirebug.com/

Here's a screen shot of the BoonexNerd.net front page using the standard plain fonts:

This tells us that the CSS that controls the title is called .blog_unit .title. You can see it here:

All true, but where is it located. If you hover over the blogs_common_css link, you will see this:

*FireBug is such a live saver some days :D

There it is. In our example, it's located in the modules.

8. Now that we know what file to work with, open up the file and look for ".blog_unit .title". It on line 102. Here's what it looks lik in the file:

9. We want to add the font-family property. Remember this:

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

Well we want to do this:

.blog_unit .title {
font-family: 'Lobster', arial, serif;
font-size:12px;
margin-bottom:-3px;
width:85%;
}

10. We are almost there. We need to add this link in our _header.html file:

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

Open up your _header.html file located in templates/base/ folder. Open up the file and add the link on or about line 34. It should look something like this:

Save the file and upload it to your site.

Ok, now let's have a font party!!!

Happy Programming!

...sip...