Build Your Own Business Website header image

How to Add and Use Google Fonts not Already Installed With Thesis

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This member asks how to use the Google fonts from the Google Font Library in his Thesis based WordPress Website. We look at the fonts available and I demonstrate how to get the code that installs the font and where to place it. Then we change the font for the site title and then look at how to change the font for the entire site.

Video Transcript

Okay so now we are going to answer that Peter asked. Peter asked if we can use Google web fonts besides the ones in the Thesis dashboard. And the answer is yes and it’s actually relatively easy. Let’s go to Google Fonts so let’s see, Google Fonts. So you go to Google web fonts and Google has you know, added a whole lot of different web fonts. If we look inside of our dashboard for a second and go down to Thesis Design Options, somewhere in here, Thesis Design Options and Font Colors and more… you can see that you’ve got a bunch of Google Fonts. They all start with a G here but it’s actually a relatively small list compared to what’s available now. And so, for example, let’s say we want to use Cherry Cream Soda. I love this thing. So if you just select click to embed Cherry Cream Soda, let’s see… you use this font, okay.

So the first thing we need to do is we need to add this link reference to the head of our web page and actually, we have to add it to the head of all our web pages. And so, you can do that using custom functions php and that’s probably actually the best way to do it. But the easy way to do it is just to copy this and then let’s go over to the Community Library Website and let’s use it on this heading here.

So let’s see, we’re going to log in… wp-admin. Okay and then go down to Thesis Site Options and then under additional scripts in the document head, open that up and paste that code. That link code there? Now Thesis will place this in the head of every page. So we hit save here, just to show you, here’s the page before we saved it and you’ll see that there is no link to the Google stuff here. But now, when we go back to our site and hit View Source, now you can see that we have added this… well, that’s interesting. You know, it also added…oh I see. I wasn’t logged in, that’s why. This was stuff that has been added to the page I logged in because of the admin bar. But if you forget the admin bar for just a moment and look for the Google stuff, here’s that link for the Google font API with Cherry Cream Soda.

And now, what we have to do is apply it to a specific style. And so, I’m going to apply it to the heading and so, I’m going to do that in my custom css file and I’m just going to start up here at the top. .custom and then it’s #header #logo and then we’re just going to say font family and…not that. It’s font family: and let’s see, we can say serif as the fall back. Let’s go back to the Google page for a second here. Over here to the Google page, it says font family Cherry Cream Soda Arial and Serif. Let’s just seal that piece of code, actually. Go back over here, paste it. So the way this works is first, it will use the Cherry Cream Soda. If for some reason or another, it can’t find Cherry Cream Soda, it will switch to Arial and if for some reason or another, Arial isn’t available, it will switch to Serif. So that’s the way this little font family thing here works. If we save that and upload it to our site, let’s see… library, wp-content, themes, thesis_18, custom, and custom css and upload that. Come back over to the site and refresh it, this should change now to that font… Community Library Case Study.

And let’s see, so Pam has got her hand up. Well, will all browsers recognize and apply Google fonts the same? Probably not. Just like anything, there’s going to be some variation. You know, I would expect that Firefox probably does a pretty good job of it. Yeah, that doesn’t look too bad. And if we go to… if we come over here to Internet Explorer for a second and take a look at it… yeah you know, they’re not exactly the same. They really are pretty close to the same, aren’t they? Yeah you know what? It seems to me that it’s a little rough around the edges and maybe that means that this needs to be a larger size. I’m not sure but in any case, that is the way in which you can use these fonts and it’s actually quite easy to do obviously. And you know, we could also apply that to the headings if we wanted to or the you know, h3 and the sidebar or whatever we wanted really, to take this font and apply it to those things. So, it’s a pretty cool thing.

So thank you Peter for asking that question. Let’ see, and you can use it site wide. That’s a good question. Peter did ask, “Can you use it site-wide?” And to use it site-wide, here’s what your code looks like. You would open up your custom css and you would say body… not .body but body .custom with no break and then you would just say asterisk colon and then font family like that. Oh no, I’m sorry. That’s not right. It’s just body .custom. Yeah, I was having a brain freeze there. Body .custom, if we saved this…we can upload it. Actually, let’s just… yeah, let’s just do that. We’ll save it, upload it and refresh this. And now, you can see all of the text. Everywhere has been changed and the reason why all of the text everywhere has been changed is because I don’t have any special text set for any of the other parts.

So for example, if we go back to the dashboard and I go back down to Design Options, I could actually set the header that instead of inheriting from body, I could set this to Arial Black. Save it… I’ll come back over… let’s see, just go back to the page. Oh no, because I’ve already overridden that so my custom css just overrides that. Let’s pick one that I haven’t done like that. And so, we’ll just… let’s go to my dashboard and go back down to Thesis Design Options. And instead, let’s just look at sidebars and instead of inheriting from body, I’m talking about the headings. If I use Arial Black here and hit save, now the headings and the sidebars will be different. See?

So you can still apply, for example, you can find a cool font that you want to use for the whole body and apply it to the entire body and then change headings and that kind of stuff as well. Okay?

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
2 comments… add one
  • Graham Gallon September 8, 2012, 2:41 am

    Hi!

    So I have added the code from the google font to my additional script, and saved it. Now I am trying to find the right code to change the post and page titles to this font. I tried:

    /*title font*/
    h1 { font-family: ‘Raleway’, cursive;

    But that didn’t work, so could you help me with the right code, please?

    • Rick Anderson September 13, 2012, 9:47 am

      Graham, sorry about the delay in responding to this. Sometimes comments get lost in the shuffle. The most reliable way to ask a question like this is on the forum. Having said that, If you want to affect the post and page titles then you would need to use a more specific selector. With Thesis it is .custom .headline_area h1, .custom .headline_area h2{...}

Leave a Comment