Using Custom Fonts on WordPress, Blogger and Tumblr *Update*
*UPDATE*
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.
For those of you who don’t want to worry about where you’re going to put your javascript files, I have a new post coming up very soon with 10 great pre-made fonts. Look for it tomorrow!
The post in now live, if you don’t want to generate the javascript files head on over for 10 great pre-made font files you can copy and paste into your head tag explained below. 10 Great Fonts To Use With Cufon
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.
The Goods
Prerequisites
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.
- A place to host javascript font files. You can use DropBox, Google Code, Tumblr, or your own web host server.
Making Your Font File
When you have those three prerequisites completed and you know where you are going to host everything head on over to the Cufon site. What you’ll want to do first is download the Cufon script. You can’t miss it its the only download button located in the header menu. Right now it’s version 1.09i, depending on your browser it’ll download differently, some may even open the javascript file and display it. At the end of it all just make sure you save the file with a “.js” extension.
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.
Below this you will find a check box asking you to accept the TOS (Terms of Service), go ahead, it’s the only way you’ll be able to make your custom font javascript.
After that you’re ready to hit the “Lets Do This!” button. The site will work it’s magic and you’ll be prompted to save the javascript file. Depending on your browser the popup will look different, on my Mac it automatically saved it to my downloads folder.
So now that you’ve got those two javascript files we are ready to move on to the next step.
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.
Blogger
First thing is to upload the two javacript files to a host. If you use DropBox you can upload them there and for Blogger purposes it would probably be the easiest place to do it. If you choose to upload your files to DropBox click on the option to copy the public link. Whether you choose to use DropBox or another service, enter the URL to those two javascript files into a text pad with the following code for now.
<script type="text/javascript" src="http://YourURLToCufonJavascriptFileHere"></script>
<script type="text/javascript" src="http://YourURLToCufonFontFileHere"></script>
<script type="text/javascript">
Cufon.replace('h3, h2, h1');
</script>
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 Cufon.replace('#paragraph');
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)
Tumblr
First things first, upload the two javascript files you previously downloaded to a web host. You can use Google Code as I’ve mentioned before, Dropbox, or Tumblr’s own service, though they specifically say you shouldn’t upload any files unless they are for themes. Since the file is going to be used in modifying your theme I don’t see no problem with uploading it there, use it at your own risk though.
After you’ve uploaded your two javascript to your host of choice, make note of the URL’s for them and head on over to your Tumblr. Navigate to the customization page for your Tumblr, it looks like so:
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.
Create a space like I did below it and enter the following code, replace what in capital letters with the URL’s for the two javascript files you uploaded earlier. The first one is for the javascript file you downloaded from Cufon and the second one is for the javascript file you got from cufon after you generated your font.
<script type="text/javascript" src="http://YourURLToCufonJavascriptFileHere"></script>
<script type="text/javascript" src="http://YourURLToCufonFontFileHere"></script>
<script type="text/javascript">
Cufon.replace('h3, h2, h1');
</script>
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.
WordPress
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.
For the more adventurous of us, what you’ll want to do is upload the two javascript files to a host of your choice. I’ve mentioned some examples you can use before, if you’re running your own site with your own domain, you can just upload them there.
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.
<script type="text/javascript" src="http://YourURLToCufonJavascriptFileHere"></script>
<script type="text/javascript" src="http://YourURLToCufonFontFileHere"></script>
<script type="text/javascript">
Cufon.replace('h3, h2, h1');
</script>
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 Cufon.replace('#paragraph');
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.
Other Options
Since writing this post the first time, I’ve grown to use Google Fonts more so over Cufon as you don’t have to worry about uploading javascript files anywhere. I will be writing a post on using Google Fonts on Tumblr in the coming days. Stay tuned for that if Cufon is too much of a hassle.
Pingback: free music downloader