Using Google Web Fonts on your WordPress Blog

• Tweet
• Email

You have your WordPress blog up and running. Now you need to do a little custom styling in order for it to stand out from the crowd.

In this tutorial, you will need:

-  Genesis framework and eleven40 child theme installed from Studiopress (my highly-recommended affiliate partner): eleven40 Theme
-  CSS Skills Required – Beginner
- WordPress Skill Requiredl – Fair

In the Genesis framework for WordPress, Google fonts are already activated, so you don’t need to use a plugin. You will add both the @link to your new font group, then also add those fonts to your CSS style sheet as family fonts. (Don’t know what I’m talking about? Check out this free CSS tutorial at W3 school!)

EXAMPLE

Site: www.Foo-losophy.com

Here is the “Before and After” image to see the headline and body fonts changes. Click to enlarge.

The blog post headline and the body font have been changed to a clean, sans-serif font called Source Sas Pro. Can you see the changes?

In order to achieve this font change, I picked one font family from Google fonts for body, head, and photo caption italic. Use the following link to start your free font archive:

http://www.google.com/webfonts

Once you have chosen your font (please, just use one!) click the “Use” button at the bottom of your window to get the code you will need for your style.css file.

I added this to top of CSS:

/* Import Fonts
———————————————————— */
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic);

I commented out the other fonts:

/*@import url(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Oswald);*/

Then I added the new fonts into the CSS in certain places. For example, in the Headline style:

h2 a,
h2 a:visited {
color: #333;
font-family: ‘Source Sans Pro’, sans-serif;
font-style: normal;
font-weight: 300;
font-size: 48px;
text-transform: none;
text-decoration: none;
letter-spacing: -0.05em;
word-spacing: 0em;
line-height: 1.4;
}

I also found that in Google fonts, you can “Review” your choice, and edit until you have the final CSS looking good, then copy that into your style.css.

Using new fonts with your blog’s theme will give you an easy way to stand out from the crowd.

What ways do you have to make your blog look unique? Leave a comment!

(BTW—If you want your photo to show up in the comments, go to Gravatar.com and get yourself one!)

- – - – - – - – - – - – - – - – - – - -

Links found in this article:

eleven40 Theme – and the Genesis framework for WordPress (my affiliate—I recommend them highly!)

Google Web Fonts (Free!)

foo-losophy.com - Philosophical musings on Foo Fighters

Gravatar.com – Get yourself a pic for your comments

Foo Fighters Website – Best Band Ever!