How to spice up your Blogger fonts with Cufón

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:

screenshot6 150x150 How to spice up your Blogger fonts with Cufón
screenshot7 150x150 How to spice up your Blogger fonts with Cufón

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.

Is Comic Sans really a bad font?

Comic
frickin’
Sans

…do you even  have to ask?

i get the SitePoint newsletter, Design View.  I used to pretty much auto-delete these or filter them to my spambox but when i started using Outlook again, and was creating rules to keep my inbox clean, i decided to just filter it to the folder where all my other newsletters go.  i’ve seen people reference SitePoint occasionally and it does talk about design, so i figure it’s worth a glance every once in a while before it hits my deleted box.  i don’t remember how i was subscribed, but i’m fairly sure it was something sneaky.

today’s newletter popped in my inbox with this title in the subject line, and my immediate response was: really?  you really have to ask? i scrolled down to the bit about comic sans, because that was the part i was really interested in.  it was part of an interview with mark boulton, a designer, speaker, and kind of a big deal in the typophile world.  (i guess.  i’m not really in the typophile world, i’m more of a type-newbie.  a typo-n00b, if you will.)  here’s the comic sans quote in question (just for my own amusement, i will put the entire quote in comic sans):

“I don’t think Comic Sans is a bad typeface. Bad designers have used it, and it’s been used by non-designers who are making a design decision without having the right tools available to them. So, for example, my mum and dad might create a newsletter for their church. They want it to be friendly, so they use Comic Sans. And we see that all over the place.

It’s just been used in the wrong context so many times, because the barrier to entry is so low — no typographic schooling is needed to be able to choose it from a drop-down. People berate it for no good reason. It’s a font that’s been overused, rather than a font that’s inherently bad.”

he goes on to talk about some of the free fonts you can get on the web, which he believes the majority of which are “pretty crappy”:

“The biggest issue that I see quite a lot with free fonts is bad kerning — the distance between individual letters. For example, if you have a capital T with a lowercase r next to it, the r has to go underneath the crossbar of the T…With free fonts — because they’re free, and there’s no commercial backing behind them — then perhaps that time is reduced, and as a result the kerning is poorer.

Also, free fonts generally lack the breadth of weights available, making them counterproductive to be used commercially. Quite a lot of designers will choose a typeface in the print world, and will want a full family of fonts to be able to use throughout the design; that way they can use just one typeface and use it right across many applications. Free fonts, on the other hand, are generally only available in single weights…So that’s another issue.”

so, back to comic sans: no, there’s nothing inherently wrong with the font — by which i mean, there is nothing functionally wrong with it.  but an overused font and a bad font amount to the same thing: it doesn’t look good, you don’t want to use it.  Papyrus is a great example of a font that’s just so overused that it’s painful to look at (which is the inspiration behind Papyrus FAIL).  there’s nothing inherently wrong with the font.  the font is actually kind of cool.  but it’s been used so much that you can’t look at it without thinking of the 999,999,997 other places you’ve seen it used.  erin will walk through the grocery store — the effing grocery store — and be like: “i spy Papyrus…i spy Papyrus again…i spy Scriptina…”  As a web designer, which, by definition means that we’re forced to settle with the lowest common denominator among typefaces — choosing between a small handful of different fonts that are compatible across Windows, Mac, and *nix operating systems, and all browsers — kerning issues are the last of our problems.  i’d like to say when i download a free font that i expect it to be fully functional and perfect, but the truth is, those are the good fontographers, and they are few and far between (last soundtrack and vtks are my current favs and have been for quite a while).  kerning can be fairly easily fixed in photoshop and illustrator, and since we’re not using those fonts for copy, it doesn’t matter as much if it has to be done by hand.

so no, there may be nothing wrong with comic sans, but please don’t take that to mean that you should use it.

…oh wait, i just did.  damn.