Build Your Own Business Website header image

Using Fonts on Your Site that are not Included 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.

A member asked how to use fonts other than those offered in Thesis. We get a brief introduction to font use online.  We start by discussing “Web Safe” fonts.  From there we talk about the Google Font Repository and Cufon Fonts.  Discussed in this video are:

  • Fonts that are available in Thesis
  • Google’s new fonts
  • Using Cufon Fonts
  • What you need to do in order to use Cufon fonts

Video Transcript

Let’s see, nobody else that is with us has given me a question. I do have other questions and so I’m going to go ahead and address one of those questions. Shan asked the question, he’d like to import fonts in the Thesis so he can change the font that’s currently used in his navigation header. The font choices offered in Thesis are somewhat limited. For example, I’d like to use Helvetica New font which isn’t available in Thesis. Now this actually raises a larger question. You know, and this is… well, it raises the question of web fonts and how a font is rendered inside of a browser. And the original method for fonts in a browser was that everybody assumed that you know, computers, whether Unix, Mac, or Windows, had a set of common fonts and those common fonts can be relied on and those common fonts were either Georgia or Times New Roman and Arial or Helvetica. And so what would happen is, you would rely on your browser to have fonts embedded in that browser that would then display those fonts when it was called upon.

And so you had this topic or this subject called “Web Safe Fonts” and you knew that you could plan on you know, fonts rendering properly if you use a certain small set of those fonts. And so in our case nowadays, you have you know, with Thesis 1.8, you have a wider choice but originally, the web safe fonts were only Arial Black, Arial Narrow, Courier or maybe even Courier New, Georgia, and let’s see, Verdana, thanks to Microsoft. And those are the ones that you could reasonably expect to find on every computer. And then what happened was that of course, people got tired of those things and they wanted to do what Shan wants to do which is use completely different fonts and the problem is, if everybody has the same font, then there’s no problem. It will render just fine but the guy who has an older computer who doesn’t actually have that font then that person is not going to be able to see the site that way you want them to see the site and so on and so forth.

And so then there came this conversation about how to deliver fonts reliably to a browser if the fonts aren’t contained inside that browser and that’s essentially what you have to do. If you cannot rely on the web safe font, you have to have a way of delivering fonts to the browser that it doesn’t already have. And there are a variety of methods that are available for doing that.

Several monthsago, Google started hosting fonts and so this G denotes the Google Font Directory font you know, and if you pick one of these fonts with a G beside it, Google will actually serve that font to your webpage for you as your webpage is being rendered. And so that is one very easy way within Thesis to be able to take advantage of the Google font because Thesis has this system that’s built in to let you use these Google-hosted fonts. Well, although you can tell still it’s a very limited number I mean, especially if you compare that to the hundreds of fonts that you may want to choose from, that you may have available to you.

Now, there are a variety of ways then that you have of using other kinds of hosted fonts and I’m just going to mention them. I’m not actually going to tell you how to do this yet but I’m just going to mention the one that I currently favor. And I say currently because this a site that’s moving you know, it’s fairly young in its infancy. This is a site I’m working on here and this site relies on what are called Cufon fonts. So before Cufon you would, if you were going to do this, this would be an image that would just sit here and so it wouldn’t actually be text and the browsers wouldn’t be able to read. But with the advent of Cufon fonts, this is actually a font that gray strip in the background is just a background image that sits behind the font and if we turn off javascript, you can see what this looks like. Now this font… so there’s javascript turned off which means that with… that this font actually is dependent upon javascript being present and actively working in order for the page to render properly. However, if you don’t have javascript, it’s still you know, it’s not beautiful but it is legible. And so if we go back and enable javascript again, enable it and refresh that page, you can see these things have gone back to their Cufon fonts.

Now using a Cufon font does require a little bit of coding. However, there are lots and lots of them. So if you go to, that’s cufonfonts, you know, let’s go the English version of this. We’re in the Danish version or something. Well, we’re still in the non-English version of this page but nevertheless, or it’s not rendering in English, in any case. But you can see that you know, there are thousands of fonts available to be used as Cufon fonts and by definition, in order to be a Cufon font, it has to be free and open source and be allow you… or you need to be able to use it as for commercial purposes without restriction. And so you know, you don’t have to worry about the kinds of things that people do worry about when they talk about using fonts.

Also, the nice thing about a Cufon font is that you can also let’s see, let’s look at it closer. The nice thing about this is you can also download it for use in like Photoshop or something like that. So if you’re working on a webpage and designing it in a photo editor, you still have access to the… you can download the font you know, with this little download button and a part of it will include you know, a true type file or some kind of a file that will allow you to add the font to your own computer so that you can use it in any other kind of computer document as well as having the online version of it.

Now the trick to this though understands that you are hosting this font and so what you have is you have a javascript file on your computer that interprets and replaces that text with this new font face or with this new type style. And it has a long winded way of saying that actually this whole question of selecting different fonts is complicated and you do end up needing to do a certain amount of code in order to make it work. And I can show you on my local machine for example, that you know, this is a skin for Thesis that I’ve been working on and in that skin I created a folder called Fonts and inside of that folder, I have javascript files for all of these different font styles. And then when it comes to using these files, I do have a custom functions let’s see here we go… custom…well, where is it? Okay, let’s just close this up for a second. Oh no, that’s right. It’s under functions here. Yeah, solo skin default. This would be the same thing as your custom functions php file but then you have this little bit of code that you know, says where the script is and says what the script you’re going to replace and says which elements of the text you are replacing with what font family. And this is all a little bit of javascript that you have to add to your page in order to make that Cufon stuff work. So I mean, there’s a little bit of code associated with it but…and I do plan on having some instructions on how to use these fonts because as you can tell, it gives you an awful lot of flexibility. All of a sudden, you can do some pretty cool things without those things being images. And then when they’re not images, they actually get to stand in, I mean, they’re text that’s read by search engines. And so… which is what the objective is for having these things as text instead of images.

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