How To Use Google Web Fonts on WordPress and Other Sites

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

Earlier this week Google released Google Font Directory and Google Font API. Google teamed up with Typekit to create an open sourced Font project. All fonts found in the directory are available for use on any website under an open source license and are served by Google servers. Once in the directory, you can browse Google’s catalog of fonts, learn more about the font designers and get the code required to use them on your site.

Google Web fonts is compatible with the following browsers

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Microsoft Internet Explorer: version 6+

How to Add Google Web Fonts to a Website

To use Google Web Fonts on a website is easy. Just add the link to the style sheet that links to the Google servers inside your head tags.

[sourcecode language=”css”]
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=fontname">
[/sourcecode]

Then add the CSS in between the style tags and add to whatever selector you want.

Code Example: There two way to use Google API

Here’s an example. You can copy and paste the following HTML code into the index.html.

Option 1:

[sourcecode language=”css”]
body {
font-family: ‘Tangerine’, serif;
font-size: 48px;
}
[/sourcecode]

Option 2:

[sourcecode language=”css”]
<div style="font-family: ‘Font Name’,serif;">Your text</div>
[/sourcecode]

Here’s an example. You can copy and paste the following HTML into an index.html.

[sourcecode language=”HTML”]

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: ‘Tangerine’, serif;
font-size: 48px;
}
</style>

<h1>Making the Web Beautiful!</h1>
[/sourcecode]

Making the Web Beautiful!

How to Add Google Web Fonts to a WordPress Blog

As of right now, there are not any plugins that will allow us to simply choose and add an entry into post or restyle the fonts on your site. After some research and testing I was able to use Google Fonts API. I have only figured how to use Google Fonts by adding an entry in the CSS, so the overall fonts will change. I am still looking into how change the font when using the editor.

In order use Google fonts, all you need to do is update your header.php file and style.css. For this example, I changed the H tag. I changed the H5 tag because I rarely use that h tag.

NOTE: Before you make any changes to these files, back them up and save a copy on your computer.

First thing you will need to do is chose what font you want to use. Then open your header.php file. Appearance >> Editor >> Header.PHP. Inside your head tags, add the following code:

[sourcecode language=”css”]
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=fontname">
[/sourcecode]

For our example I am using the Tangerine font. So I used the below code.

[sourcecode language=”css”]
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
[/sourcecode]

After entering your code, click on update file.

Next, you will need to open the style.css file. Once opened, you can then add the CSS to whatever element you want. Just copy and paste this code in your style sheet. Once the code is added then click update file.

[sourcecode language=”css”]
CSS selector {
font-family: ‘Font Name’, serif;
}
[/sourcecode]

In our example, I made the change to the H5 tag. To make that change you will need to look at the code and find how the H5 is coded and make the necessary changes. The code I used is:

[sourcecode language=”css”]
h5{font-family: ‘Tangerine’, serif;font-size: 48px;text-shadow: 4px 4px 4px #aaa;}
[/sourcecode]

Evolutionary  Designs

NOTE: text-shadow: 4px 4px #aaa; is adding a shadow, and is not needed. I added this because the font looks good with a drop shadow.

That’s it. There nothing else to it. If anyone can figure out how to manually style certain lines in a post entry, please let me know. If you come across any plugins that can make this easier for those that do not want manually code this, please tell us where to find it.