Codeable info

How To Add Google Fonts To Your Website In 3 Easy Steps

Posted on by in WordPress Tutorials

Google Web Fonts has proved to be a very popular service it was launched and an invaluable service to website developers. There are lots of great WordPress plugins that help you integrate Google Fonts into your website such as WP Google Fonts, Fontific and Ultimate Google Fonts.

Installing Google Fonts on your website manually is incredibly easy and in my opinion a better option that using a WordPress plugin. I recently reactivated my personal blog and instead of designing a logo using Photoshop I simply used Google Fonts to style the site name and description.

Kevin Muldoon

As you will soon see, the steps involved to style a website title like this are very straight forward :)

3 Steps To Install Google Web Fonts On Your Website

Step 1: Choose Your Font

The first thing you need to do is visit the Google Web Fonts website and choose your font. There are currently 335 fonts to choose from however more are been added all the time.

You can enter the text that you are going to style in the preview area. There are three different preview options: word, sentence and paragraph. This helps you see exactly what the text you want to style will look like. You can also change the size of the preview text and sort entries alphabetically, date, number of styles, trending and popularity.

Google Web fonts

To help you find the perfect font there is a search box at the left hand side of the page. There is also some useful filters. You can choose whether serif, sans-serif, display and handwriting fonts are displayed in the main panel. The thickness, slant and width of fonts can all be set and you can filter via 8 different scripts such as Latin, Vietnamese and Greek too.

Many fonts have many different variations available for them too (such as italic, bold etc).

Step 2: Link To The Font In The Head Section Of Your Website

There are three options available to you for each font. If you want to continue browsing simply add the font to your collection. The pop up link will show a pop up page with more information about the font. Otherwise, simply click on the quick-use link to be taken to the installation page.

Before you get the code for your website, you need to select which style and script you want. Many fonts only have one style and are only available in Latin though there are fonts in the directory with several styles.

Google Web fonts

All you have to do next is link to the font from the head section of your website (this can be found in your header.php template). They recommend it’s the first element called within the head section though I don’t think you will see a huge difference in page loading times if you don’t.

There are 3 different ways to link to the font: standard, import and Javascript. The standard option is best in my opinion as all modern browsers support it.

Google Web Fonts

Step 3: Add The Styling To Your Stylesheet

Last but not least, all you have to do is add the styling to your stylesheet. You can style any text element with Google fonts but they are commonly used only in headers so the code will likely be added to a header tag (e.g. H1, H2 etc).

Google Web Fonts

That’s all there is to it. Choose your font, link to the font within the head section of your website and call the styling in your stylesheet. Easy! :)

A Practical Example

To help explain the process of installing this code, let’s look at a quick example using the default WordPress theme Twenty Eleven.

The first thing you need to do is choose your font. For this example I have chosen the handwritten font Meddon by Vernon Adams. After clicking on the quick-use link, Google advises you to add this to the head section:

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

So the next thing you need to do is open up the Twenty Eleven header.php template. You can edit this directly via the appearance section in your admin area or overwrite the file at www.yoursite.com/wp-content/themes/twentyeleven/header.php.

If you scroll down the template a little you will find the start of the head section:

<head>

You simply need to add the link code to the font directly underneath and save the template:

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

The theme is now linked to the Meddon font however you still need to specify which element you want to style with it. The code you need to add to one of your classes is:

font-family: 'Meddon', cursive;

Let’s style the header text of Twenty Eleven as the default font used is quite basic. A quick look at the Twenty Eleven header template reveals that the ID selector that is used to style the H1 title is called site-title.

All you have to do is open up your style.css template (i.e. the theme stylesheet) and search for site-title. You should find this:

#site-title {
	margin-right: 270px;
	padding: 3.65625em 0 0;    
}

Simply add the CSS code to this ID to style your header:

#site-title {
	margin-right: 270px;
	padding: 3.65625em 0 0;
        font-family: 'Meddon', cursive;
}

That’s all there is to it. These simple steps will have changed your Twenty Eleven title from something like this:

Twenty Eleven Original

To this:

Google Web Fonts Example

Don’t be too concerned if you don’t like the new font that’s been added. There are over 300 hundred fonts available so you are bound to find something that suits your taste.

Some more examples:

Yanone Kaffeesatz

Yanone Kaffeesatz

Reenie Beanie

Reenie Beanie

Luckiest Guy

Luckiest Guy

So far we have only changed the font of the title. Remember, you can change the size and colour easily too using CSS. You could also style the description underneath the title to make it look even better :)

Using Google Fonts Is Easy

Overview

Google Web Fonts are a quick and easy way to style website and article titles. I’ve seen them used in a lot of sidebar areas too.

I hope you have found this tutorial useful. If there is any aspect you are unsure of, please let me know and I will do my best to help you implement Google Fonts on your site.

Good luck,
Kevin

)
Codeable info

Comments (14)

Comment by madebypuka says:

thank yo very much    i did seach but dont find very datail explanation hoe to use google fonts  :)  
thank you again keep  you good work   
 
j9j9

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Comment by Babak Naffas says:

Great example of integrating Google Web Fonts. I did a similar post a while back and played with the CSS to apply the example font only to that post.

http://enterpriseyness.com/2011/07/integrating-google-web-fonts/

Codeable info