February 15th 2013: Added video tutorial to bottom of post. Click here to jump down to it.
Feburary 13th 2013: I had a system problem and lost all my images, I’m working on getting the images back up. Sorry for the inconvenience.
I have a new post coming up very soon with 10 great pre-made fonts. Look for it tomorrow!
Read the last article on Cufon fonts now, Advanced Font Effects
As a photographer and designer I want total control over the aesthetics of my website. If I left everything to default I would be stuck using Helvetica or Times New Roman as my default font because we all know those two fonts work across all browsers and operating systems. With recent advancements in html compatibility, we now longer have to embed fonts in overcomplicated fashion, we have now have various different options when it comes to embedding fonts. Read on and enjoy custom fonts on your portfolio/blog/both.
This is going to be a pretty lengthy post so I’ll try to make it easy for you to find the information you’re looking for as conveniently as possible. This article will guide you on enabling custom fonts onto Blogger, Tumblr, and WordPress sites. Because the first few steps are the same for all three services the following section works for all three, I will further break down the services later below.
Alright, first things first, to enable custom fonts you need three things:
- A site, whether it be Blogger, Tumblr, WordPress, or anything else you may use.
- A font file which you have the rights to embed. Some fonts don’t allow embedding or require a separate license to embed them. Usually when you download a font it comes with a EULA, read it and see if it mentions anything about it. If not, well, just use your own judgement.
Making Your Font File
Once you have the file saved in a location you can remember, your desktop will do fine for now, lets head on over back to the Cufon site and pay our attention to this sections below:
Browse to the font file you want to use, although it has all those options of Bold Typeface and Italic, it’s best to stick to just doing the regular type to keep site load speed fast. If you don’t mind your site being maybe a couple seconds slower and want to use bold or italics in conjunction with the regular you can do it. You can also choose to not use the regular font and use just bold or just italic.
After you’ve browsed to your font file, you’ll want to make sure you click the EULA check box button. (Remember, if you don’t have the rights to use a font file for embedding purposes DON’T, or do, your choice.)
After you’ve accepted the EULA the section below pertains to the glyphs which will be converted from your font file into your embeddable font. You’ll want to keep it at basic latin and to increase compatibility. Check the Latin-1 Supplement box to include some basic accent characters sometimes used. Ideally the less glyphs you create the better, it’ll help in keeping load speed down. Basic Latin is what you’ll need for your everyday needs. Any other special characters you might have to use something else in conjunction with it.
Below you’ll find an option to limit your custom font to only work on your domain. If you’re using a commercial font and have a license to embed it online you probably don’t want anyone else looking at your source code and using it without your knowing. Regardless if you purchased a font or used a free one, it’s a good idea to go ahead an limit it to your domain anyways.
Below the security form you will find a couple options for optimizations. A good idea would be to leave the scaling option at its default value of 360 units per em. Check off the path optimization feature, it may not suit your needs but if you need it leave it on, this is also something of your choice. Kerning should be left on.
Installing the font on your site
This is the part where I am going to split it up and show you how to install your font on the site you’re using. Even though it is somewhat similar for each site, I’d rather have it split and go further into detail with each rather than cram details for all three together. Use the links below to jump to the section you need.
In the section where it says Cufon.replace(‘h3, h3, h1′); you can designate which sections of your page you want the cufon script to replace the fonts on. You can use h1, h2, h3, h4…etc or you can use jQuery and use tags
Take this new text you replace with your URL and place it into your Blogger’s HTML Head section, just after (Get to your Blogger HTML via the Blogger Dashboard under the design tab and subcategory edit HTML)
Once you’re on this page, click on the “Edit HTML” button right below the theme preview, you shouldn’t miss it. It’ll bring up a screen with the HTML code for your Tumblr theme. If you’re not familiar with code don’t worry, this will be really simple. Look through your code until you find the opening “head” tag. It should be towards the top.
In the section where it says Cufon.replace(‘h3, h2, h1′); you can designate which sections of your page you want the Cufon script to replace the fonts on. You can use h1, h2, h3, h4…etc or you can use jQuery and use tags
Cufon.replace('#paragraph'); If you’re using a custom theme, the creator of the theme probably gave each section of the theme using div tags. Look around the code and I’m sure you can figure out how to change other specific text other than just the headers and titles. *Update* I was giving support to a visitor of mine and his theme didn’t label the title of the blog with either h tag. In their case they could add an h tag in the source code of the theme. Sometimes the theme creators will specify the size of the font when h1 is used. If you need it bigger you may need to play with the CSS code of the theme. This isn’t a problem with cufon, it’s the way your theme was coded. If you need help send me an email and I’ll be glad to get it working for you.
If all you wanted to change was the header and title portions (sections that use h1, h2 etc) than you are done. Simply save your code by clicking on the close button on the top left and then saving on the next screen.
The process for adding Cufon to a WordPress site is a little different than the other two. You’ve actually got a couple choices you could choose from. If you are afraid of code and don’t want to get your hands a little dirty. You could simply install one of the many WordPress plugins which enable it. Simple. Each plugin will have it’s own settings so your luck will vary with those.
Either way, upload your files and make note of the URL’s.
Next using an FTP service or going through an editor on your web host, navigate to your themes header.php file. The location of it will be something similar to this (YourDomain).com/wp-content/themes/(YourThemeName)/header.php. You’ll want to add in the following code, replacing the URL’s with your own, and save it. That’s it.
In the section where it says Cufon.replace(‘h2′); you can designate which sections of your page you want the Cufon script to replace the fonts on. You can use h1, h2, h3, h4…etc or you can use jQuery and use tags
I hope I could help some of you today, if you have further questions don’t hesitate to comment and I’ll answer your questions as soon as possible.