Build Your Own Business Website header image

How to Install and Use Cufon Fonts in Thesis 2

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 show how to install and use cufon fonts in Thesis 2. Cufon fonts are a way to have our own self-hosted fonts that are used on the site and that are unique and different. We discuss issues with some Google web fonts that are pixelated around the edges which we do not recommend unless used in the sizes where it doesn’t pixelate.

We show how to install these cufon fonts, copy the JavaScript code that contains the command cufon replace and modify the JavaScript to be called and making it to apply to the site title by adding the HTML class to the Headline to change its font style.

Video Transcript

First, talking about how to use Cufon fonts. Now if you don’t know what Cufon fonts are, Cufon fonts are a way of… we’re going to start here from the Cufon font library. Cufon fonts are a way for you to have your own self hosted fonts. That is, fonts that you install or that you store on your site and that you use on your site that are unique and different.

Now, you’re probably familiar with doing this with Google fonts except I have two problems with Google fonts. One of them is that Google fonts are sometimes slow and so it can slow your site down. And the second one is that I find that often enough, Google fonts look awful. So I’ll just show you an example of what I… Google fonts.

Okay so Oxygen looks pretty good in all of its sizes. It’s a fairly nice looking example. But if we go to… if we look at the display Serif and we grab one of the really thick ones and let’s say we look at this one here… actually, it doesn’t look too bad today. Maybe this isn’t the one I was looking at. Oh yeah, here it is. This is the one that looks… well, okay.

So you can see down at this size how it’s pixelated around the edges. And I’ve seen a number of people’s sites where they’ve done a lot of really nice stuff except that they’ve got these little pixelated sections around the edges of their Google fonts. And I think that looks awful. And so you know, I wouldn’t recommend using this except when you use it as a size that is large enough that it doesn’t pixelate. But as soon as you come down here and you use it at this size, I don’t think it’s a good font to use.

And it’s not… this is not that unusual. I mean, this is another one of this ultra bold where you take a look at that and you know, this size down here, each of these sizes, they look awful. It doesn’t really start looking good until it’s really big. And so anyway, that’s my feeling… I mean, that’s a problem I think with Google fonts that it doesn’t exist generally speaking with Cufon fonts

Okay and so Cufon fonts then… well for example, if we just look at the Serif fonts you know, Cufon fonts look really good. You know, if we take a similar example of this, a similar kind of Cufon font, you don’t see any of that kind of pixelation. And you can test drive it and change its font style you know, its size down. You can see that you know, it doesn’t go through that process of getting awful when it’s not the perfect size.

So what we’re going to do is install this font. And I think though, what I really want is a font… I mean, there are hundreds and hundreds of fonts to choose from here at this point. There’s a… let’s see, we’re going to use the Sans Serif and we’re just going to pick one from this list to use although I’m going to pick one I’m going to like.

Okay Coolvetica, I’m going to use this font here. Okay and I’m going to just use this for some headings. So when I’m looking at this here, I can come over here to the Cufon font kit download and the first thing you’re going to do is choose the character sets you want to use. Now automatically chooses some for you but the more of these things you choose, the bigger the file gets, the more it takes your site to load and all the rest of that stuff. So the trick here then is instead of doing that is to minimize it. So we’re not going to take Turkish and we’re not going to take these currency symbols. You know, if you were going to use pounds, those currency symbols, you’d want to add this. You might want to use a Latin extended in some kinds of situations. You may want to have some miscellaneous symbols or mathematic operators or whatever.

But you can see you know, by coming through here and taking a look at these, these are other things that you can choose to add to your list. But all we’re going to do is take the basic one.

Now if you want… say you’ve chosen that you want to use this font and you want to use… you want to use this font say in Photoshop in order to lay stuff out, you can do that right here with Font Download. All you do is go to Font Download, click Font Download and it will have downloaded this folder which gives you the two type font. So you could now install this in your operating system and then it would show up in Photoshop and that kind of stuff.

So that’s one thing to say here is first, you can download the font to use in your graphics editing program or your word processor or whatever. But then you go the Cufon kit download. So we’ve selected Basic Latin as the one that we’re going to use. And so we’re going to go ahead and just click Font Download as Cufon. Let’s see, it doesn’t seem to do what I want it to do. Let’s try that one more time.

So I’ve got my Basic Latin, that’s it. Font download… okay, I’ve never seen that happen before. Let’s just… let’s add the… let’s click all of those things that they have added before and see if it changes it. Okay so let’s go to a different font then. I’ve never seen that before but…okay.

Okay, we’ll use Myriad Pro. And now this has all kinds of different weights, right? So what we’re going to do is pick Myriad Pro Bold but none of the rest of the families, Myriad Pro Bold and Myriad Pro Regular. And we’re just going to do Basic Latin and now that that’s there, download the Cufon font. There we go so now we’ve got our javascript downloaded.

We’re going to keep this page open but we’re going to open up Filezilla because we’re going to need to create a place to store this, these files. And I’m going to come over here to… yeah, that’s it. I’m going to install this on this site.

And so I’m going to come over to wp content and then Thesis and then skins. And in my skins, I’m going to… inside of BYOB Agility Nude, I’m going to open that up. And actually, I’m going to add a new folder. Let’s see, we’re going to add a new folder. Create directory, that’s what it is, and I’m going to call it fonts. And then come back over here to my downloads. Okay, I’m looking for that Myriad Pro Cufon font.js and I’m going to copy that. Come over to the website, Thesis 2 skin, content, Thesis skins, nude, fonts and place that file there. Okay so now I’ve got my font file inside of a folder called fonts. And I’m going to go ahead and upload that folder to the website.

Then I’m going to come back over to this section here. I was supposed to check I accept all legal responsibility and I’m going to copy this script. Now, I should just show you that in this script, this is the command, cufon replace. And what it does is it looks for this class right here and then it’s going to add the font family here. And the only font families we’re using are Myriad Pro Regular and Myriad Pro Bold. So we’re going to delete some of those before we get too far down the road and then we’re going to show you how to modify some of that stuff too.

And so we’ll come back over to our site now that we’ve copied that. And we’re in this Lesson 4: Thesis Responsive Skin, in the HTML head editor, this is the place where we make this change. Because we come over here to our head scripts and paste that. And what I’m going to do here… so I’ve got my script here which is calling back to the ordinary styling place then I’ve got this address here is actually looking for… the address to the file that we just added to the skin. So we have to add the actual address here. So instead of just Myriad Pro Cufon fonts.js, we actually have to add the full address. And we would add the full address by coming over here and looking at this.

Let’s see, if we come over to fonts, we can grab this part of the address, wp content thesis skin BYOB Agility Nude fonts. We’ll copy that here and then we need the rest of our own address, right? And so the rest of that address is here. And now what we have is… backspace that… now we have the entire address of the location of this file. So Lesson 4 Thesis Responsive wp content Thesis Skins BYOB Agility Nude, fonts, Myriad Pro.cufonfonts.js. Okay so this is their… this is a remote site getting one javascript thing. This is the second piece of javascript that we need, that we installed on our site and then we come down here to our javascript command. And we don’t have a semi-bold so we’re just going to delete the semi-bold command. We got a cufon replace… no, just get another one of those. We got a regular but we don’t want condensed or condensed italic. We don’t want bold or bold italic. We don’t need bold condensed. So we just got Myriad Pro Regular and Myriad Pro Bold. Those are the two that we’re using and this is the javascript.

And then note that what we’re going to do here is we are going to… this is the class name that it’s going to be looking for and we could enter different class names here if we wanted to and we’re going to do that in a moment. But for the moment, I’m just going to copy this class name which is Myriad Pro Bold. Copy that, save the head. Let’s just go view the site here for a second just to make sure that that stuff actually got inserted. And so up here, in our head, we now have that script being called plus we have our new script being called which is the one that we loaded. And then we have our final piece of script being called which is the cufon place, right?

Okay so that stuff is happening. Now what we need to do is make it apply to something. And what we’re going to make it apply to is the… we’ll try making it apply to the site title here. So if we come back over to… let’s see. Let’s just go to the… let’s edit the front page template. And if we come to our header area, header area page, typical header… no actually, I don’t have access to the site title in this case so let’s do it on our headline. And I’m going to add that class, the Myriad Pro Bold to the headline. And then if we view the site, our headline should be different. There it is. Now we have this entirely different style of font here for the headline. We just changed that out by adding that.

Now we could also though… let’s say we wanted to do this with our H2 tags as well. So this is an H2 tag here, right? If we inspect the element, we could go to post content H2 as a class to replace which would be coming back over here to our head editor, HTML head. Going back down to our head scripts and then we could just create another cufon replace. Actually, let’s use the regular for this one. So Cufon replace but instead of this, what we’re going to say is post content H2.

Okay so now what it’s going to do is where it sees the class post content, where it sees the selector, post content H2, it’s going to use the Myriad Pro Regular. So we save our head like that and we refresh this. And now, you’ve got that applying to the H2 tags as well.

Now somewhere down the road, I’m going to create a box that lets you… once you’ve created it, let’s you select it from a list. But for the time being, this gives you a great deal of control over… or this gives you the opportunity to add you know, specialized fonts to your site that probably will go quicker than Google fonts and that are also… you have a much larger set of selections and also don’t have some of the same sor tof icky scaling issues that Google fonts have.

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