Google Web Fonts

Google Web Fonts

Posted on September 14, 2011 by Anna

Changing the font on your website has been a hassle in the past, but with new css techniques it has become much easier.

Google offers free hosted Fonts

Google has made it extremely easy to use these new techniques by offering hosted web fonts for free.

Go to the Google Web Fonts web page and choose the fonts you want to use on your website by adding them to a collection.

Once you have selected the fonts that you want, click the “use” button in the lower right hand corner of your screen.

This brings you to your collection page. On this page you can do a few things. You can choose which fonts in you collections that you really want. This is also where you can choose the font weights that you want. Remember that using to many fonts can really slow down a site as well is make it messy. You can also choose a character set if there is more than one set available.

Now you have the different ways of embedding the font into you site. We are just going to be looking at the Standard method, but if this is not what you want, then there are explanations on Google’s site on how to use them all. To add the font to your WordPress site, copy the code under the standard tab and paste in into the <head> of your WordPress theme. This is most likely in the file called header.php.

Lastly, you need to add the css to your style.css. Your Google Collection page has a snippit of code under “Integrate the fonts into your CSS” section of the page. Copy the bit of code that has the name of the font that you want to work with. If you have added more than one font to your collection, than there will be more than one snipit here.

Open up your style.css and find the rule you want to affect and add your snipit to that rule. As an example, if you want to affect the h1 tags than you would look through your css until you find a rule for h1 tags. Then you paste your code into that rule. If you don’t have a rule for what you need changed, then you simple need to create one. And that is it. Your css should look something like this:

h1 {
     font-family: %u2018Metrophobic%u2019, Arial, serif;
}

If you know zero about css, then it may be time for you to look around w3schools CSS Tutorials. They have some great tutorials that will walk you through the basics of different languages, including css.