Genesis-Add new fonts to your theme using Google Fonts

Categories: customize   fonts   Genesis   Theme   Wordpress   wordpress

I wandered by the computer, and my wife had left a blog up that I started to read.  I loved the font used when writing a comment, but when I went to enter my comment, I saw that it was saved in a different font.  Ugh!  That was disappointing…Heck, I even left a second comment mentioning I could probably help fix it.

So, given myself this challenge, I figured I better figure out how to do it.

First off, there are countless tutorials on the web on how to use Google Web Fonts, and it’s pretty simple.  The one I looked at here was specific for the Genesis framework, although I think the content is applicable to any web site. If you’re looking for some concise instructions, I suggestion you take a look at Brian’s page.

First off, I used Chrome’s “Inspect Element” feature to figure out what the name of the font is.  On the page you’re looking at, highlight some test, right-click, and choose Inspect Element from the context menu.

[caption id=”attachment_143” align=”aligncenter” width=”300”]Use Google Chrome's Inspect Element tool to view the information you're interested in Use Google Chrome’s Inspect Element tool to view the information you’re interested in[/caption]

At the bottom of Chrome, some windows will pop-up giving a bunch of information.  In this case, since I wanted to know what the font was, I scroll on the right to determine what the font name is.

[caption id=”attachment_144” align=”aligncenter” width=”300”]Search through the elements until you find "Font-Family" Search through the elements until you find “Font-Family”[/caption]

Next step, is going and looking the font up on the Google Font’s site.  (Any font you find on there can be imported into any web site, with no fancy downloads or complicated code.)  At the time of this writing, when I did this, there was a search box on the left.  As you type in the name, the search will show results on the right side, as shown.

[caption id=”attachment_145” align=”aligncenter” width=”300”]This is roughly what the Google Fonts site looks like at this the time of this writing. I cut out the middle of the page This is roughly what the Google Fonts site looks like at this the time of this writing. I cut out the middle of the page[/caption]

Click on the Quick use button on the right.  This takes you to a page where you copy the code you need to reference the font. Scroll down until you see section 3, add this code to your website.  Select the middle tab, that has the @import on it.  This is the code you’re going to enter into your style-sheet. Note that you may select multiple versions of the font to install if needed.

For me, when editing a style-sheet, I copy and paste the current file I’m using into Notepad++, my preferred editor. I then make modifications there, then copy and paste back to the WordPress editor.  Notepad allows me to do undo’s until I get back to any point I’ve edited, in case I make a mistake, and want to undo it.  I think everyone has their own preference on how to edit and upload files, so we’ll leave this up to you.

In the style-sheet, there are two things to do:

  1. Import the font by placing the code at the top of the file.  For Genesis Themes, they are very well organized, and you can search for the text Import Fonts, and paste it there along with any others that may already be there.

  2. Find the particular elements you’re interested in updating, and adding the font family to the list.

#nav {
    font-family: 'Life Savers', serif;

Or something like that, depending on the particular element you’re interested in.

I hope you found this useful. Please share your thoughts, and if this was helpful or not in the comments.


Written on April 25, 2013