Build Your Own Business Website header image

How to Add Cufon Fonts to Thesis – Part 4 – Troubleshooting Again

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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.

We found another issue to troubleshoot with the cufon fonts that was brought up by one of our members when he added his cufon fonts to his site.

Video Transcript

Rick: Okay, Paul I’ve just unmuted your microphone.

Paul: Okay.

Rick: So what’s the issue with cufon font?

Paul: Oh, I’ll give you instruction as I could this morning.

Rick: Did you find the code?

Paul: Oh is there a code available somewhere on the site?

Rick: Yeah, you know, I always put the code immediately, tried to remember it to put it immediately to the forum. So the code I used this morning is in the forum under Live Question Answer Code.

Paul: Okay, I’ll take a look on measuring…

Rick: And so, here’s the code for adding the cufon fonts to Thesis. This is the code I use.

Paul: Okay, good deal.

Rick: And all you have to do is just substitute out the names of the fonts. The name of the fonts and what you need to do, where you want to use them, but I mean…

Paul: Yeah, a text page came up everything a site that works but I just didn’t get the font and so it might be just some typing error I guess.

Rick: Well, did you catch the error I made on the on queue script thing where I unqueued one script before the other?

Paul: Yeah, I did. I changed those like you did as well and still no go. So…

Rick: Then it’s probably just a little bit of…I mean do you already have a site up? You still have that page that we can look at?

Paul: I do, it’s just a testing site. It’s a…would I drop the link in the…

Rick: Sure.

Paul: Okay. That google plus that you have, but let’s see…

Rick: Okay, it’s taking a while.

Paul: Sorry, I want to down it…here’s the right one. Okay, here it is…let’s see… Sorry, there we go.

Rick: Okay, assign a question to me… Okay, so, then the question here is first did we actually get the java script added? Okay, so here we go, there’s the…you’re missing a slash between thesis_182 and custom…Oh what’s thesis_182custom-1?

Paul: It’s a multi site installed. So that’s how I set that up.

Rick: Is that look right?

Paul: It does, it definitely brings up the file.

Rick: Oh.

Paul: Oh it didn’t work with you, let me see.

Rick: Oh, let us get rid of the…

Paul: Oh just so the one you clicked on there… So you’re saying a slash right there?

Rick: Well, I’m just…I mean I don’t know. The thing is that you usually have a custom folder inside of your thesis.

Paul: Yeah, where did you click on there to get to that 404?

Rick: I clicked on this one here, it says, http://magicunderground.com/wp-content/themes/thesis_182custom-1/fonts/, now I would have guess it’s thesis_182/custom-1.

Paul: Yeah, you know you might be right. And so let’s dig in if that’s the issue. Yeah I can’t imagine or not being a slash there. So…

Rick: Okay, and you can tell just by looking at filezilla right?

Paul: Yeah, well most usually I’m using dreamweaver, jump-in there real quick. We don’t have to do this live if you got other things going on here. But let’s see, custom-functions…

Rick: You want to see your thesis_182 and then inside of thesis_182 you’re going to some kind of a custom folder.

Paul: Yeah, it’s custom-1.

Rick: So is it thesis_182? Is that the name of that directory?

Paul: Yes

Rick: And then you’ve got /custom-1 and then inside of that you’ve got fonts?

Paul: Yes. You’re welcome to see my screen if you’re interested so you can see the code. Actually, I’m still trying to figure where that URL is.

Rick: I just made you the presenter.

Paul: You there?

Rick: Yeah.

Paul: Okay.

Rick: You are the presenter. Okay, so if we look in… so you’ve got thesis_182custom-1. Part of your problem though with this is that the (–) isn’t inside the code right? Cause it goes to thesis_182 without the slash.

Paul: Where is that…let me see here?

Rick: Yeah, I think that you’re missing a trailing slash after the theme URI or the leading slash before the custom-1 in your code. So if you go look over your code for a second.

Paul: Can you see my screen?

Rick: I can see your screen, but I’m seeing the view-source. I want you to show me the actual code.

Paul: I’m going to split screen this and bring this back around. How about that?

Rick: Almost, not quite. Okay. So then, in terms of your…Oh did you just put the slash there?

Paul: I just now did, and so I will try to upload this real quick?

Rick: Yeah.

Paul: I’ll do a refresh on other page and see if it… No, it’s still nothing there.

Rick: Let’s see /cufon-font, there’s the page we suppose to be on. And then if we inspect this, that is in H1, entry title, so I want to look at your code again here for a second. So you’ve got, no… the problem is…is that you’re placing headline area H1 but what you really want is entry-title H1. So you’re not…

Paul: Right here?

Rick: Yeah… and is that a… yes it is a class. So what actually is really is, it’s h1.entry-title.

Paul: Oh it is? Okay.

Rick: Oh…I see, actually…you know, I’m sorry. I suppose .headline-area h1 should have worked. That’s right, it should have worked. So you’ve got the right selector and if we come back up and view the page source, we now have the right…that is working correctly. Now cufon.replace, that part…oh but you’ve specified the VGA-handwritten as the font family in that not the flux-architect.

Paul: Okay. Which, I guess the font that I downloaded and put it that custom folder inside the font. There was the VAG-handwritten

Rick: Okay, so then what you have to have is the java script for the VAG-handwritten. You can’t use the flux-architect.cufonts.js script.

Paul: I see…I think I just might have done a couple of download at the same time. And I wonder if I downloaded the wrong stuff honestly.

Rick: Yeah. The font family name as to match to the java script there.

Paul: Sure, okay. Where is it right now? Let’s see here.

Rick: Well, not on my view-source it isn’t.

Paul: Okay.

Rick: See, because you’ve got VAG-handwritten in there, in that script.

Paul: I see… So I’m going to change this…

Rick: That’s probably not the right thing to change. It probably won’t work. What you really want to do is go back to cufon fonts and find out what the right name for the file is and make sure you’ve downloaded that file. You probably can’t substitute the font family name for the file name.

Paul: Okay.

Rick: Now if you already downloaded the VAG-handwritten.cufon-fonts.js then you can look and see what that file name actually is. Oh, in fact you’re on the right hand side. You can see it. There in your local files. Just copy that file name there. Right.

Paul: Okay

Rick: See that? You can see the case was different.

Paul: And stick it there?

Rick: Yeah, actually you’ve got the cufon-fonts.js in there twice. So you got to keep getting rid more of it.

Paul: Oh I see, okay.

Rick: And get rid of the… there you go. So, yeah upload that and see if that works. I bet you it does.

Paul: Okay.

Rick: Yeah. I don’t if that VAG-handwritten looks like.

Paul: Yeah. I see.

Rick: Although that file is there. It’s properly rendering that file. So you’ve got the file name right in that. And as long as it’s the right name for the font family. Which one is it? It’s the h1.entry-title. So you’ve got your headline are h1, cufon-font that should be the VAG…

Paul: Should be. It’s not. However I can see what I’ve done obviously was mess something up with the wrong download. But it seems to be catching me now. I can go through it piece by piece I suppose and make sure something is not missing. Because it’s not coming up… I just did the inspect code and I don’t see it as that VAG-handwritten.

Rick: Ok, well, I think you understand the pieces of the puzzle. Obviously, it’s from one of the pieces that got to be just right in order for it to work. But…

Paul: Yeah. Yeah.

0 Comments… add one
0 comments… add one

Leave a Comment