Use Whatever Font You Please On WordPress

Tweet

Type in WordPressEarlier in the year, Alex wrote an article about Cufon, a method of text replacement which uses JavaScript to replace HTML text with canvas elements that render the text in vector format. Basically if you’re a designer who is fed up or confused about the inability to put whatever type you darn well please on your web site, Cufon can help. For a more thorough overview on how text replacement works, read Alex’s article.

If you haven’t heard about Cufon before, and are using WordPress, it is a little bit of a web designer’s dream. For many years, the ability to put any font of your choosing has been limited to options such as SIFR and @font face. Both offer designers the chance to use a font other than the old reliables (Times New Roman, Arial, Georgia, and the like), but they do also have their downsides. SIFR is Flash-based and a little bit tricky to use and @font-face, while almost there, ran into major problems with the End User License Agreement on font ownership and use. Cufon comes somewhere in the middle of these two and is easy to use.

To use Cufon on WordPress, you’ll need to first of all install the plugin, which can be found on the WordPress extend page. The next step is to use the font generator.

cufon-generator

There are a few little pernickety bits here, and I found that I had to take the font I wanted to use out of the main fonts folder on Windows before I could successfully upload it. You also need to confirm (by ticking a box) that you rightfully own the font you are using. download movies

See Fonts and the Law at fontembedding.com for more information. Fonts produced by the following foundries/vendors/creators are known to be safe: Adobe Systems. The following are known to require separate or extended licenses for Web Embedding: FontFont (separate), Hoefler & Frere-Jones (separate), ITC (separate), Linotype (extended).

Once I did that, the font is converted and you are presented with a .js file which you upload to your WordPress plugins folder.

The Cufon plug-in will detect a correctly generated file in your plugging folder and make it available for use on your WordPress site. That’s the bulk of your work done. The Cufon plugin page gives you examples of how to use CSS with the .js fonts.

I wanted to use the Tw Cen MT font on my blog headings so I added the following to the CSS in the space provided on the plugin page:


Cufon.replace('h1', { fontFamily: 'Tw Cen MT' });

Cufon.replace('h2', { fontFamily: 'Tw Cen MT' });

The resulting headings looked like this:

cufon-in-action

And that’s all there was to it. A quick and easy way to take more control over my WordPress design without having to use images or Flash for typography.

Have you been using Cufon? Do you find it easy to use? Are you using it on a blog?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.eirestudio.net babyboy808

    Thanks Jennifer, was meant to check out Cufon awhile ago and never got round to it, this was the kick I needed!

  • Anonymous

    Cufon is excellent. We’ve used it on a few sites and have been very pleased. It does have a strange line-height bug in FF2.

  • Esther

    I think it’s important to note that the EULAs of most fonts do not permit this type of online embedding. This means that just because you have the font installed on your computer — you don’t have the right to embed it online.

  • http://www.tyssendesign.com.au Tyssen

    SIFR is Flash-based and a little bit tricky to use and @font-face, while almost there, ran into major problems with the End User License Agreement on font ownership and use. Cufon comes somewhere in the middle of these two and is easy to use.

    It’s not quite that simple. The form you fill out for converting your font to a js file asks that you tick a box that says:

    The EULAs of these fonts allow Web Embedding (without Adobe Flash)

    See Fonts and the Law at fontembedding.com for more information. Fonts produced by the following foundries/vendors/creators are known to be safe: Adobe Systems. The following are known to require separate or extended licenses for Web Embedding: FontFont (separate), Hoefler & Frere-Jones (separate), ITC (separate), Linotype (extended).

    So it will depend on which font you want to use. If you’re using an Adobe font, you’re fine to use Cufón.

    So essentially, it’s not that much different from using @font-face except that it’s more cross-browser compatible.

  • Gilles

    And please take a look at the benchmarks before you use cufon, sifr or any other technique. I ended up writing my own in PHP, using imagemagick which also allows me to add shadows/fonts etc. The rendered fonts support wrapping and are (off course) cached. Since i cache them, i can write the cusom CSS to the page, leaving the headers intact (<h3><span>…</span></h3>) so printing the page still works. I set the width and height of the headers (in @media=screen) to the image width/height and hide the span. In the print CSS i show the span and set the width/height of the h3 to auto (off course using the default body font). Although there are a few drawbacks (rending takes time) it has more advantages (caching, you know how big the image is, so you don’t have flickering (e.g. jumping) of content.). Just something you might consider.

  • http://www.laughingliondesign.net Jennifer Farley

    Thanks Esther and Tyssen. You both make the important point that you can’t use ANY font willy nilly (official legal term). All fonts from Adobe are considered safe for use, but you need to check with other type foundries. I’ve updated the post accordingly.

    Thanks Gilles for the detailed info on how you’ve used type replacement on your site.

  • Richard

    Although Adobe fonts are considered safe from a licensing point of view, isn’t it the case that you can only use Adobe fonts that you own? i.e. ones that you have either purchased separately or came with an Adobe product that you have a license for? I would be pleased to hear otherwise but I suspect it isn’t the case that anyone can just use any Adobe fonts they find anywhere.

  • http://akindale.com brandaggio

    Does any know of a single case of someone successfully being prosecuted for using a font in this fashion?

    If you were a big enough target (successful enough monetarily) to be worth suing (Adobe or some other foundry wouldn’t bother taking someone to court who couldn’t pay) or taking to court I am sure you could afford to by the license for the font/s you need.

    If you aren’t, seems like a bunch of worry about something that is about as likely to have happen as getting struck by lightning!

    I am all for being above board, but…

  • http://www.tyssendesign.com.au Tyssen

    I’m sure those suburban mothers who downloaded music illegally probably thought they weren’t big enough to get fined either, but they still did.

  • Alex

    The text is not selectable and not seen by SEO..

    so makes no sense to use this, because its th same as doing my banner in photoshop…

    the point of using text instead of banner is due of SEO… although TEXT is always more ugly than banner.. but gives better results in terms of traffic..

    this tuto gives no solution since its the same as using a JPEG banner..

  • Stewie

    Checked by e-mail at Storm Type Foundry: you can generate and use ST fonts at website, if you purchased the font you want to use, or if you want to use free ST fonts (so Storm Type Foundry fonts license is also cufon-safe).

    More info

  • Ryan Kirk

    Alex, the text may not appear selectable but it is. Highlight it and copy it and you’ll see that you can paste it into a text editor. Check the source, it is fine for SEO because the text is still there.

  • http://www.tyssendesign.com.au Tyssen

    Have you got any evidence that the text is not seen by search engines because I believe you’re wrong on that point? For instance I visited a number of pages listed on the Cufon demos pages and did a search for the content listed in text replaced by Cufon. In all cases, Google had links back to the page in question, so Google is certainly indexing that content (after all it’s right there in the HTML) so I think your point is entirely inaccurate.

  • http://www.laughingliondesign.net Jennifer Farley

    Alex, this is definitely not the same as making a jpeg banner. You can apply this style once to any tag, class or id and the text will change for all occurances. You would need to make a lot of jpegs to achieve the same effect, which would be incredibly time consuming and most certainly not readable by the search engines.

  • http://www.brassblogs.com doodlebee

    I have cufon on my own site, and have used it on 2 others for clients. I LOVE it. I’ve used different replacement methods (done sIFR and the one that auto-creates .gif images for you) and hands-down cufon is the simplest, easiest font-replacement I’ve used. I do a lo of WordPress sites too, and it’s a breeze to slap it in there.

    I *have* heard that it’s not selectable and not seen by SEO – but on both points, Alex, you are wrong. as with sIFR, if the end user has js turned off, they see the regular text (with the regular font) in it’s place. The text is there for SEO just fine (just view the source code – there it is!) and yes, it’s selectable. It just doesn’t turn your selection blue.

    And as always, follow the licensing terms for your fonts – be good, people ;)

  • Font Wiz

    The good news is that there are many options, including Cufon, that can let you specific the fonts you want to use on a website, and then copy the fonts from your desktop computer up to the server for subsequent automatic downloading to users viewing your site. But as others have pointed out, you cannot make any assumptions about the fonts you choose to use in this manner. The fonts you have on your computer typically cannot be copied onto other computers – or posted to websites either for sharing or for formatting on websites with Cufon, sIFR or other techniquest with @font-face.

    For example, the fonts that come with Windows and Microsoft office can only be used with websites in the EOT format (and not with Cufon or sIFR). I just read that one font foundry has announced they will be offering EOT font licenses, so most likely other fonts will soon be available for designers to use as well with web sites.

  • http://akindale.com brandaggio

    @Tyssen – The RIAA are a rare breed. Cumulatively, the RIAA have had limited success in their witch hunts, wasted enormous financial resources and have a nominal chance of collecting on any huge reward, in the scant chance that is the judgment.

    I am not suggesting someone not keep their nose clean, just that people with fairly low profile sites in all likelihood have essentially zero to worry about.

    Again – anyone ever heard of anyone getting in trouble yet using Cufon with some random font? Anyone? When and if it starts to happen, perhaps that would be cause for some concern.