How do font-replacement techniques such as Cufon or @font-face work?

I really want to start using some of these techniques but I really don’t understand what makes them work and how to implement them?

Answer:

Great question, I was waiting for someone to ask this one!

@font-face

@font-face was first introduced back in the CSS 2 specification back in 1998, however overall browser support has limited its use. @font-face has appeared again in the draft of CSS 3, so it’s come back up in the “main stream” as a way to maybe use fonts other than those that are considered “web safe”. The only trick is that browsers aren’t all on the same page regarding what or how to support this css construct. (Are we surprised? Hardly.) But, here’s how it works:

Step 1. You declare the @font-face construct, tell it what to name the “font-family” and supplement a URL for the font file. Currently, different types of browsers support different types of font file formats, so be sure to check before implementing this.

@font-face {
    font-family: 'MemphisMedium';
    src: url('fonts/memphism-webfont.eot');
    src: url('fonts/memphism-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/memphism-webfont.woff') format('woff'),
         url('fonts/memphism-webfont.ttf') format('truetype'),
         url('fonts/memphism-webfont.svg#MemphisMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

Step 2. Once you’ve declared the font fine in the @font-face construct you can call it in any css id or class just like any other font family.

h1 {font-family: 'MemphisMedium', Helvetica, Arial, Sans-Serif; font-size: 2.9em; font-weight: normal; color: #ffffe2;}

While @font-face is cool and is AWESOME to use, you do need to make sure that you have legal rights to use the font online.

Cufon

Cufon is a javascript text replacement that basically takes a font, renders EACH character in the replaced string with it’s color, size, and weight information, and then puts it out where the replaced text area was. Sounds confusing right?

Cufon actually makes it way easier than past methods like sIFR. I have used sIFR many times and while it’s very customizable it’s VERY hard to pick up and use without a strong knowledge of css, flash and some use of sIFR before. However, Cufon is way easier, way less confusing, in fact the first time I used it, I was like, “This is it?” So here’s how Cufon to get it to work:

Step 1. Download the base javascript file, then put it on your server with your other javascript files (I keep mine in a folder called js). This is the basic javascript information Cufon needs to have to work, so it’s really important you put that in there.

Step 2. Generate your font using Cufon’s font generator. Browse for the font file you want to use (Currently only TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts are supported.), agree that you have the rights to use the font file (there’s a check box at the end of the browse box and again at the bottom of the page), and select the characters you’d like the font generator to include, I usually do Uppercase, Lowercase, Numerals, Punctuation, WordPress Punctuation, Basic Latin and Latin-1 Supplement. Check out the full unicode chart if you really want to get anal about what you’re putting into your font generator. But the ones I have listed up there should more than suffice for most web copy and symbols.  Besides these items everything else on the generator form is optional so you can skim right by it or read it and pick and choose if you like.

Step 3. The font generator will give you another javascript file, this also goes in your js directory (or where ever it is you put things like that)

Step 4. Put in a call. Javascript call that is. In your code place a call to the base Cufon script, the font generator script and then make a function call to replace the particular elements, classes or ids you’d like Cufon to replace the font of. In this example, it’s the heading 1 elements.

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/Vegur_300.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('h1');
		</script>
	</head>
	<body>
		<h1>This text will be shown in Vegur.</h1>
	</body>

Step 5. Fix IE. Oh you knew IE would have to throw a wrench in there somewhere, didn’t ya? ;) Place this little snippet of code at the bottom right before then end closing tag and any other additional end scripts such as Google Analytics. This will fix any flickering or loading delay issues in IE.

<script type="text/javascript"> Cufon.now(); </script>
</body>

And You’re done! YAAY so pretty! For more detailed directions such as using multiple fonts, etc check out the Cufon Usage section.

Bonus Tip:

Don’t over-do Cufon, it’s not designed to be used a ton for large blocks of copy and things like that, use a web-safe font for those types of things, but at least you can get pretty headers and callouts to be sexy… it’s a start, right? If you do, you could have extreme load times where people don’t want to stick around, so just don’t over-do it.

6 responses so far

  • aprilholle (April Holle)
    Dec 8, 2009 at 8:33 pm

    Twitter Comment


    @melissabalkon RT @designmadebettr: Added to DMB: How do font-replacement techniques such as Cufon or @font-face work? [link to post]

    Posted using Chat Catcher

  • Melissa Balkon
    Dec 8, 2009 at 9:42 pm

    Woo-hoo! Thanks for the detailed explanation, you are awesome :)

  • R.J.
    Feb 2, 2010 at 6:10 pm

    What are your thoughts on typekit.com?

  • Design Made Better
    Feb 6, 2010 at 2:45 pm

    Typekit.com is a very interesting reaction to font replacement with licensing issues, however I personally think their pricing is a little steep considering there are free solutions available. While their solution does allow for selection of the font, I just don’t see it being valuable enough to tack on $25/year for a font replacement technique.

    And what happens when they discontinue service?

  • R.J.
    Feb 7, 2010 at 11:24 am

    Yeah, it’s pricey, especially when you don’t need to spend it. Do you know of any online repositories of free fonts that can be used? This seems to be the biggest value Typekit adds; the ability to search and find fonts without the need to worry about licensing issues.

    Also, with @font-face for IE, do you have to convert the font to special type?

  • Design Made Better
    Feb 7, 2010 at 1:05 pm

    RJ,

    I totally agree. Typekit would definitely save you time on checking out the End User License Agreement (EULA). I don’t know of a database of web-use EULA fonts, if someone knows of one, please feel free to share.

    Embedded OpenType (EOT) is the @font-face file type for IE, you can find converters online for most font file types.

Leave a Comment