Build Your Own Business Website header image

How to Add Cufon Fonts to Thesis

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.

 Part 1 – Download a Font

In this session, we demonstrate how add Cufon Fonts to your Thesis Website. The first thing you need to do is to download the font that you desire. Go to http://www.cufonfonts.com/, browse the fonts, see an example and test the font. When you’re done, download the font to your computer and upload it to your website.

Video Transcript

How to Add Cufon Fonts to Thesis. The way we’re going to do this is by using the functions in your custom_functions.php file.

Step One – Pick Your Font

The very first thing you do is to Pick your Font and you’re going to do that from cufonfonts.com. Now you have a fairly wide range of browsing choices and I want to go down to Handdrawn here and scroll down till I find something that I like the looks of. There’s lots and lots of different choices here that you can choose from and I like Scratch so I’m going to use it.

Once you’ve gone to cufonfonts and browse by type, the next thing you have a chance of is taking a look at examples and test driving your choice. You can do that by going to detail and inside of detail, here’s an example of what it looks like. If we’re using this for a logo or something important that you know it needs to look good in a certain way, which usually is the case for me, then you can type that stuff out, “Learn How to Build a Website” so you can see whether or not you like the way this looks.

Series of Font Choices

We need to drop it down a little bit so you can see what that test drive looks like. Once you’ve picked it and you like the way it looks, then you may want to play around with this in photoshop or some other photo editor . You can even do this in Word or publisher by using this Font Download because once you select this Font Download, what it’s going to download to your computer is a series of fonts that can be installed either on a PC or on a Mac that you can use in any program that uses fonts. In this case, this has a TrueTypeFont and that’s the only example of it. It just got this TrueTypeFont, some of them are going to have lots of different choices in here.

In fact, that might be a good reason to make Scratches not a good choice to look at because we should look at one that has lots of choices. We’re going to look at this Flux Architect instead because it has the standard Flux Architect, it has bold italic, it has bold, and it has italic. When you download this font, you’re going to download that and look inside of it, you can see it has got the bold, the bold italic, the italic and the regular as fonts that you can install on your computer.

Step Two – Configure the Download

Once you’ve done that, you go to step 2 which is to configure the download. This is before you’re going to download all of the files necessary in order to make this work on your website. You’re going to configure the download and by configuring the download I’m talking under Cufon Kit Download. You’re going to select your fonts and in this case, I’m only going to select Flux Architect and Flux Architect Bold, those are the only two choices I have.

Select Character Set

Then you’re going to Select Character Set. You could select all of them or you can select your Basic Latin, I’m not quite sure why Turkish is there so I’m not going to select Turkish.

Select Fonts Using the Cufon Kit Download

Basic Latin has a dollar ($) sign so if I am not going to use euros (€), or francs (CHF), or pounds (£), then I can turn off the currency symbols. Every once in a while, I do want these accents so we’ll choose a Latin Extended but I don’t need any of the other funny little ones. I’m going to be good with essentially the Romans Language versions of these letters. I don’t need any of the Miscellaneous Symbols or the Letterlike Symbols or the Mathematical Operators. I don’t need any of the Block Elements or the Cyrillic or Block Drawing.

I do want a Latin-1 Supplement because I can do a copyright and registered trademark and I’ve got the fraction as well and then maybe my Number Forms. That’s probably it, that’s all I’m going to do.

The reason why you don’t check them all is because you end up with larger files that have downloaded and larger files that have to be served. The bigger the files, the slower your site so you want to optimize this, you want to pick the least amount of these as possible for you to download.

Of course you have to Accept Legal Responsibility for using this and you can do your file download. I’m going to go ahead and “keep it”. This is creating a JavaScript file and downloading it to my computer.

Step Three – Set Up the Directory Structure

Then step 3 is to Set Up your Directory Structure because this stuff is going to be residing on your website and Thesis gives you a way of dealing with this that will withstand upgrades. The thing to do here is to create a font structure within your custom folder. I am going to do that here, websites, byobwebsite, tutorial sites, thesis byobtutorial, WordPress, wp content themes, thesis 182 and inside of custom, I’m going to create a new directory called “Fonts”.

Adding a New Directory to the Site

Inside of this directory, I’m going to put that file that I downloaded. If I go back over here to downloads and sort it by date, Flux Architect, copy that, come back over to that font structure I created and paste it. Now, because I’ve already downloaded this once today as I was practicing, I’m going to get rid of this little “1” here but if it’s the first time you’ve done it, you won’t have that funny little thing in front of it.

This is the actual name of the JavaScript, flux-architect-cufonfonts.js. I’ve placed the JavaScript file in my new directory and I need to upload that to the site. I am going to wp-content, themes, thesis_182, custom and my custom fonts, I’m just going to upload there. Obviously, what has happened is that flux-architect-cufonfonts.js is being created and has been added here to the site.

0 Comments… add one
0 comments… add one

Leave a Comment