Although we love WordPress, we’re not always “all WordPress, all the time” around here. This post is going to be about how to spruce up your Blogger site using custom fonts that are cross-browser compatible.
Blogger is great if you don’t have time or patience to learn all the ins and outs of a larger platform, or if you just want a blog and that’s all. And Blogger is really good at creating and maintaining communities. But where Blogger fails is providing you a way to upload files that aren’t images to your site. There are a variety of reasons you might want to do this (and just as many reasons why Blogger doesn’t want you to do this), including hosting music that you created, PDF documents, or doing some cool stuff with fonts. The how or where of uploading files isn’t within the scope of this particular post (although this Google search might help give you some ideas), but I will try to show you how to get some custom fonts on your site once you’ve figured out where to host your files off-site.
If you’ve had any experience with the more advanced CSS technique of @font-face, you’ll run into a problem when it comes to Blogger when you open up your Firefox browser: it doesn’t work. That’s because Firefox doesn’t like it when you link to a typeface hosted off-site — whereas other browsers don’t care, Firefox finds the security vulnerability too important to conveniently ignore (since you could potentially download a restricted font without permission), and so they block it. With CSS @font-face out of the question, that leaves whipping something up in Photoshop (or insert your favorite image editor here), right?
Not so. Two options remain, though I’ll only cover one because I think it’s easier to generate the font file: sIFR and Cufón. sIFR takes your typeface and turns it into a Flash animation. Your text is then replaced by calling a specific JavaScript file that is configured to look for whatever you’ve decided to use custom fonts on (for example, the H2s of your post titles). As such, it loads somewhat slower and has some limitations in how you can use it, plus it’s kind of annoying to set up. On the upside (for font designers), it’s pretty difficult to reverse-engineer a font out of a .swf, so you can use more or less any font you like without worrying about copyright infringements. Cufón transforms your font into a JavaScript file, then uses another JavaScript to replace what you want. Since the font file is text (encoded into a .js file) rather than a Flash .swf, it’s significantly smaller and loads faster than sIFR. On the other hand, while I don’t know how it would be done, presumably it is possible to reverse engineer a typeface out of a Cufón .js font file, so you need to be aware of usage restrictions (anything on FontSquirrel is fair game, as is anything tagged “Free” or “Free for personal use” on DaFont, though it’s still a good idea to read the specific license to be sure you’re complying with the author’s wishes). Typically, I just hit FontSquirrel and go through their directory.
Once you’ve got your font, you’ve set up whatever file or web hosting you’ll be using to store files, and you’ve decided to use Cufón, you’ll need two more things: a Cufón font file and the Cufón JavaScript. You can get both of these from Cufón’s home — first, upload your font into the generator, and download the Cufón file, then download the latest version of Cufón. You’ll upload both of these to your file space once you’ve got them.
Now to actually activate Cufón. Decide what you want your new custom font to be; an easy option is your H1 or site name. Anything else requires some general knowledge of the template you’re using (if you’re using a template based on one of the old templates Blogger used to use, H3 is often the post titles and H2 is the sidebar headings and the date). Go to Edit HTML on the Design tab and scroll down to where the layout of the page starts — which you’ll know because it will go from looking like this:
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
to this:
<div id="outer-wrapper"> <div id="wrap2"> <!-- skip links for text browsers --> <span id="skiplinks" style="display: none;"> <a href="#main">skip to main </a> | <a href="#sidebar">skip to sidebar</a> </span></div> </div>
In between those two things, you should see this:
]]></b:skin> </head> <body>
This is what we’re interested in. Right above your </head>, paste this:
<script src="http://www.yourdomain.com/blogger/cufon-yui.js" type="text/javascript"></script> <script src="http://www.yourdomain.com/path/to/your/cufon.font.js" type="text/javascript"></script> <!--[if gte IE 9]> <script type="text/javascript"> Cufon.set('engine', 'canvas'); </script> <![endif]--> <script TYPE="text/javascript"> Cufon.replace('h1'); </script>
I’ll break this down a bit so you can see what we’re doing. First we have this:
<script src="http://www.yourdomain.com/blogger/cufon-yui.js" type="text/javascript"></script>
This calls the Cufón JavaScript which makes all the magic happen. Right under that is:
<script src="http://www.yourdomain.com/path/to/your/cufon.font.js" type="text/javascript"></script>
This is your custom font, whatever it may be called, wherever you stored it on your server. After this is a bit of an IE hack, since IE9 started doing things differently and didn’t display the font at all. If you’re using an older version of the cufon.js, or if you have IE9-beta and are experiencing issues, or if you just want to be on the safe side, throw this into your code, under the JavaScript calls:
<!--[if gte IE 9]> <script type="text/javascript"> Cufon.set('engine', 'canvas'); </script> <![endif]-->
The <!--[if gte IE 9]> part ensures that this will only run on browsers that are Internet Explorer 9 or higher. After that, we tell Cufón what we want it to replace:
<script TYPE="text/javascript"> Cufon.replace('h1'); </script>
In this case, we’re replacing the H1, the site title. Now, we’re almost done, but there’s one thing left and you’ll be glad you took the extra step. An acronym that was invented after people started using @font-face declarations more is FOUT, which stands for Flash Of Unstyled Text. What FOUT is, is when you load a page and it takes a second before the custom fonts on the page show up, flashing momentarily with the default fonts. You don’t want that, so scroll all the way to the bottom of your template and right above the </html></body>, copy and paste this:
<script TYPE="text/javascript"> Cufon.now(); </script>
This is basically a FOUT-killer, telling Cufón to run when the page loads, rather than waiting for everything else. What you get in the end is something that will look like this:
Of course, if you didn’t want to bother with all that, we have a growing collection of premium Blogger templates for $5 with Cufón turned on for cross-browser compatible custom fonts in headings. For five bucks you can get an awesome new Blogger template with a unique and cool title and not need to worry about any of the coding stuff and we’ll be adding more and more in the coming weeks and months. Check them out!
No related posts.