At S Collective, we love JavaScript fonts. They’re a little touch that really can bring a design to another level. We usually use them for heading titles like h1, h2, etc. We also use them for any small special text areas that need a unique font.

Why JavaScript Fonts?

It’s easy to get tired of using Arial, Georgia and Times New Roman year after year on the web. Regular image replacement is terrible for SEO. Using a huge font-indent fixes the SEO problem, but then you have the large inconvenience of not being able to change your text without redrawing your image in Photoshop. Using JavaScript fonts, changing your content and titles is as easy as tweaking your HTML. If you use a content management system, clients prefer JavaScript fonts because they can change their own content without calling you, the developer/designer, and asking you to redesign the image. JavaScripts fonts are a nice accessible alternative to using image text. If someone has JavaScript turned off (like older text-based cell phones), the fonts will degrade gracefully and just fallback to display as regular web text, in the default font-family defined in your stylesheet. Since older browsers like Internet Explorer 6 and 7 still run JavaScript, there are virtually no cross browser issues. Since smartphones like iPhones and Android run JavaScript, there are virtually no mobile compatability issues.

Alternatives to Cufon

In my personal experience, I have found Cufon to be superior to the alternatives. I personally have found Cufon to be more reliable than Font Squirrel. Sometimes Font Squirrel looks a bit fuzzy or grungy if you upload your own font because it resamples the font from scratch. Cufon fonts look crisp and their reconstruction of the font is errorless. TypeKit is another nice option, but TypeKit is $25/year if you want to more than two JavaScript fonts or use JavaScript fonts on more than one site.

Advantages of Cufon

Cufon is pretty quick and painless to use. It can use any font. It is a free service. There are no issues with loss of font image quality in the reproduction. It is pretty reliable. It also has some nice options like font color, text gradient and text shadow.

Disadvantages of Cufon

However nice Cufon is, there are a handful of small drawbacks. Cufon fonts can’t be highlighted or copied like regular web text. I have found Cufon’s feature where you can load up to four versions of a font (regular, bold, italic, bold italic) in one JavaScript file to be somewhat unreliable. This can always be overcome by simply loading each font variation in a separate file, although this will increase load time slightly. Another thing to keep in mind with Cufon is that you need to check the legal issues yourself for using the fonts you want. Many fonts cannot be used for free. Services like Font Squirrel and TypeKit take care of the legal footwork for you. Lastly, all JavaScript fonts will increase the site’s overall load time. Each JavaScript link in your header increases load time slightly. I have found the increase in load time fairly negligible through, for users on relatively modern computers on relatively high speed connections (this is now most of the users in the West).

How to implement Cufon

First you need to download the main Cufon JavaScript file at http://cufon.shoqolate.com/js/cufon-yui.js?v=1.09i. Then you need to upload your font file at http://cufon.shoqolate.com/generate/. As I mentioned above, I generally only have so-so luck with using different variations like bold and italic. Sometimes it works, but if it doesn’t just upload each variation as a separate font in the “regular typeface” field. In the field labeled “Use the following value as the font-family of the generated font (optional)” enter the name of the font, like “arial”, etc. Remember what font-family name you assigned your font because you will use this later on. Although Cufon says this font family assignment is optional, I find Cufon works much more consistently with it, so go ahead and enter a font family name. Now check the EULA box. For the “Include the Following Glyphs” area, leave the Basic Latin checked (this covers numbers, uppercase letters, lowercase letters, and common typographical and coding symbols). If you need foreign characters or the cents symbol and your font contains those characters, then also check Latin-1 Supplement. Click the “I acknowledge and accept these terms” box and click “Let’s do this”. This will download the font. If you have more than one font you need, upload each one and download the JavaScript file for each one. Now upload these JavaScript files and the initial cufon-yui.js file you downloaded from Cufon all to a directory called “js” on your server. Next, you want to add this code in your header: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/font1_700.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('.font1Selector', { fontFamily: 'font1FontFamily' }); </script> The jQuery link at the top allows you to target selectors by class and IDs, which is a nice feature. Using this remote Google jQuery link will speed up your site slightly more than using a local copy of jQuery. If you already have a jQuery link, there’s no need to add another jQuery link. The cufon-yui.js link links the main cufon file and initializes things for using Cufon. The next link links to the font file you downloaded from Cufon after uploading your font to them. Note that these files have the somewhat strange extension .font.js and also includes the font weight in the filename. This is how it is when you download it from Cufon and you can leave it like this. The class font1Selector in the example can be changed to anything you want. This will be the class or ID you will use in your HTML to assign the JavaScript in your page. The font1FontFamily in the example should be exactly what you entered in the field labeled “Use the following value as the font-family of the generated font (optional)”. Here is a more complex version with four fonts and a text effects: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/font1_700.font.js" type="text/javascript"></script> <script src="js/font2_700.font.js" type="text/javascript"></script> <script src="js/font3_500.font.js" type="text/javascript"></script> <script src="js/font4_500.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('.font1Selector', { fontFamily: 'font1FontFamily' }); Cufon.replace('.font1SelectorVariation', { fontFamily: 'font1FontFamily',textShadow: '#fff -1px 1px' }); Cufon.replace('.font2Selector', { fontFamily: 'font2FontFamily' }); Cufon.replace('.font3Selector', { fontFamily: 'font3FontFamily' }); Cufon.replace('.font4Selector', { fontFamily: 'font4FontFamily' }); </script> Note that for each font you’re using, you will have two links. The first is the actual JavaScript link to the font file you downloaded. The second is where you create a selector and assign your font family. Note the JavaScript syntax for fontFamily as opposed to the regular CSS font-family syntax.

Enjoy

If you haven’t experimented with JavaScript fonts yet, you will be amazed by how much it opens your design options. The load time is not too bad and they gracefully degrade for users with JavaScript turned off. Go ahead and make your sites more beautiful, more engaging and more effective!