Build Your Own Business Website header image

How to Use Google Fonts with Thesis 2.0

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.

In this session we demonstrate how to use Google fonts with Thesis 2.0. We show how to choose the font family and how to paste the code into the skin editor.

Video Transcript

In the meantime, what I’m going to do is demonstrate how to use a custom font.

Jim, yes I am off on Wednesday. And yes, Thesis 2 is released. If you go to DIY Themes, you can download it there. And yes, this webinar will be available for watching on my website. If you’re a member of my site, you can also download it. But if you’re not a member of my site then it’s just going to be available there for watching. But it will be available to the general public.

Okay so now let’s add some Google sites… I mean, Google… you know what I mean. We’re going to add a Google font. And I believe the Google font we are going to add is Ubuntu but let’s just go to Google Fonts.

Okay let’s see, okay Google Web Fonts. And so I have no slant, sans serif and what does that thing look like? I forgot to ask him what this is. I’m just trying to find which one of these fonts it is. Well you know, I’m just going to assume here that… let’s see, does that look about right? No. Okay well, it doesn’t matter. Just pick one. I’m going to  pick this one.

So I’m going to pick a quick use and I’m going to use a semi-bold. And then I’m going to grab this link right here. I’m going to go over to my Thesis… well let’s see, I’m just going to put this in the… where am I going to put it? I’m going to put it in Thesis admin for the moment because I don’t think… okay, let’s see if there is a template-wide script. You know what? I’m not sure that there is a template-wide… I mean, I’m sorry… a skin-wide script here which is what I’m looking for. As soon as I say that, when we close, it’s going to show up. But for the moment, we’re just going to assume there isn’t.

Now we’ll come over here to the site and we’ll go to HTML head. And we’re going to go to head scripts and we’ll paste it. And it’s the link for the CSS for that, okay? So we’ll close that, save the HTML head, now I’ve added the font. And then I’m going to come over here and go to my skin editor, to my CSS. Come over and look at Google Web Fonts here for a second and this is what they say, “Font family sigma negative sans serif”. Okay so that’s the font family I want to use.

Come over to my skin editor and let’s go to the tagline. And under additional CSS, I’ll type… what was that again? Site tagline. Come back over here, just copy that. Site tagline, opening bracket, closing bracket and hit save. Save and compile and I believe we’re going to have a different font. Well, not yet. Let’s see, site tagline. Oh, I lost it. Pardon me. Let’s try it again.

Site tagline, come back over to font family. Copy that and V, font family. Okay, so there’s our additional CSS. We’ll save it. Let’s take a look at it again just to make sure it stayed there. Yeah okay so we’ll save and compile. There we go, it worked.

So we could do that same thing with this heading here. So we’ll come down to… what was that? That was the feature box intro heading. Intro text, intro heading, additional CSS. Paste that there with our opening bracket and closing bracket. Save it just to make sure it showed up there. Yup okay so we’ll compile that and refresh it.

And there we go, Welcome to the Barking Chihuahua Café, okay.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment