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.

8 Flares Filament.io 8 Flares ×

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

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.

EvolutionaryDesigns.net runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!


Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

About James

James spends most of his free time using social media and loves to teach others about design, web development, CSS, SEO, and social media. He is addicted to Wordpress, social media, and technology. You can reach him on his, personal website, Do not forget to follow him on Twitter @element321

Comments

  1. Thanks for explaining about the fonts – I saw an example on another blog today and wondered how it was done 🙂
    My recent post Summer Nights Aboard Yacht in Vancouver

  2. Jeff Sebring says

    Hi,

    I wanted to let you know about my new Google Fonts WordPress Plugin. I hope you like it. It's simple, but will be expanded greatly in the future. –http://easywebcoder.com/wordpress-plugins/google-

    Any feedback is welcome.

    Jeff

  3. Jeff, looks like we are working on similar projects! Greetings. Here's another plugin for adding Google Fonts to your WordPress site:
    http://adrian3.com/projects/wordpress-plugins/wor

    Just select the font you want to use from a dropdown and optionally assign it to standard elements like headlines, lists, blockquotes, etc.

  4. i love the way google always surprises us with their new invention.
    My recent post 30 Sales Tags Vector Graphics

  5. Thanks for another fantastic article. I am always looking for original WordPress tutorials to suggest to my own readers. Thanks for creating this post. It’s just what I was trying to find. Truly phenomenal post.

    • Thanks Carol for stopping by and commenting.

      I try and add new wordpress tuts when I have time to work through them on this site or my test servers.

  6. Thanks for a great article explaining about the fonts – I am going to use it for my new WordPress blog and in the logo
    http://www.datacentredesign.co/hvac-index.php

Trackbacks

  1. Element321 says:

    New Blog Post: How To Use Google Web Fonts on #WordPress and Other Sites http://bit.ly/anXPXU #google #fonts

  2. Learn How To Use Google Web Fonts in WordPress…

    Google releases Web Fonts Directory and Web Fonts API. Learn how to use Web fonts on your site….

  3. Story added…

    Your story was featured in Featured in MMO Social Network! Here is the link to vote it up and promote it: http://www.mmosocialnetwork.com/Wordpress/Learn_How_To_Use_Google_Web_Fonts_On_Your_WordPress_Site

  4. How To Use Google Web #Fonts on #WordPress and Other Sites http://bit.ly/anXPXU by @element321

  5. DesignGizer says:

    RT @FamousBloggers: How To Use Google Web #Fonts on #WordPress and Other Sites http://bit.ly/anXPXU by @element321

  6. […] This post was mentioned on Twitter by DesignGizer and Famous Bloggers, Element321. Element321 said: New Blog Post: How To Use Google Web Fonts on #WordPress and Other Sites http://bit.ly/anXPXU #google #fonts […]

  7. AHA! RT @FamousBloggers: How To Use Google Web #Fonts on #WordPress and Other Sites http://bit.ly/anXPXU by @element321

  8. […] How To Use Google Web Fonts on WordPress and Other Sites, Evolutionary Designs Compatibility information and a great how-to for using Google’s Web Font Directory and API. […]

  9. How To Use Google Web Fonts on WordPress and Other Sites | Evolutionary Designs…

    Google web fonts and web font directory have been released. Learn how to add Google web fonts to your site or WordPress site using Google Web Fonts API….

  10. dagaloo.com says:

    Use Google Web Fonts on WordPress and Other Sites…

    Learn what Google Web Fonts are and how to implement Google Web Fonts API on your site….

  11. Use Google Web Fonts on your WordPress and Other Sites…

    Google released their web font directory. Learn how to add Google web fonts API to your website or WordPress site….

  12. How To Use Google Web Fonts on WordPress and Other Sites http://bit.ly/anXPXU

  13. How To Use Google Web Fonts on WordPress and Other Sites http://bit.ly/9VjjW3 🙂

  14. How To Use #Google Web Fonts on #WordPress and Other Sites http://bit.ly/9VjjW3 #design 🙂

  15. Oleg Xtraboy says:

    How To Use Google Web Fonts on WordPress and Other Sites http://icio.us/r2cyev

  16. Toma Shuji says:

    How To Use Google Web Fonts on WordPress and Other Sites … http://bit.ly/c7Fg79

Leave a Reply to Toma Shuji Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

8 Flares Twitter 7 Facebook 1 Pin It Share 0 Buffer 0 Email -- Filament.io 8 Flares ×
%d bloggers like this: