Use Any Font on WordPress with Simple Cufon Replacement

Use Cufon to display any font you want

The most stylish WordPress sites use non-standard fonts in their designs. The trouble is that in most cases, the end user won’t have the font installed on their machine which would naturally stop them from being able to see it as the designer intended.

A commonly used method for getting around this problem is a script called Cufon, which renders the font on the server, rather than on the client, so it doesn’t matter whether the end user has the font installed or not – it can still be displayed properly.

And in true WordPress community style, there’s a plugin that makes the whole thing very easy.

So if you want to change out a font or two on your existing theme, just follow these simple steps, and you’ll have a sexier blog in no time at all.

  1. Find the font that you want to use on your blog. A quick search for ‘free fonts’ on Google will pull up hundreds of excellent resources. Download the .ttf font file.
  2. Convert the ttf file to a Cufon file at the Cufon Generator. Upload the resultant .font.js file to /wp-content/plugins/fonts/. Create the fonts folder if it doesn’t already exist.
  3. Install the WP-Cufon plugin on your WordPress site.
  4. Find the CSS class/ID of the page element(s) that you want to use the font with.
  5. Go to your WP-Cufon settings page. If you uploaded your font file to the right place, you should see it listed under Your Fonts. Take down the name of the font (which is case-sensitive).
  6. Use the example below to form your Cufon replacement code. In the example below, I’ve replaced the fonts for CSS classes h1, h2 and h3 with the font nevis_700.

You can be as broad, or restrictive as you want with the fonts, by using CSS to declare IDs for the specific elements that you want to change. You can even use multiple different fonts on the same site.

In order to do this, use the following example, where I replaced h1, h2 and h3 with nevis_700 and .comments and .meta with oldsansblack

So have you tried it? Were you impressed with the results? Why don’t you post a link to your revamped theme?

34 thoughts on “Use Any Font on WordPress with Simple Cufon Replacement”

  1. bbrian017 says:

    I never knew that a font on a website or blog would only be showed if the visitors computer had that font… how odd is that? I have never tried this before and it’s highly doubtful I would have the time to play with it. if I’m not busy at blogengage I’m trying to promote the old personal blog.

    However it is interesting to know my visitors may not be seeing my website the way it was intended. Food for thought, that’s what this is.

    1. Yeah, the trouble is that you fall into a false sense of security because you’re designing the website on your own computer, so of course, you will always see it as you intended, but yeah, if one of your user’s doesn’t have the font installed and you’re not using a method like Cufon to render the font on your reader’s behalf, then it will default to their browsers default font, which is normally something horrendous like Times New Roman or Courier.

      Thanks for dropping by. Much appreciated as always.

  2. Shiva says:

    Hi Dave,
    Thanks a lot for this plugin, I actually do not use any fancy font in my theme, never had the thought to change it but I have been wanting to do that. Reading this post, it occurred to me that I can easily do it using this plugin. Also, I never knew that the fonts if not available in the users computer do not display. If it is so than, this Cufon plugin is really quite useful

    1. Hi Shiva,

      Yes, designers have found ways around over the years, such as creating graphics with the fonts in them, but then that creates issues like not being search engine readable, and also not being able to select the text. Cufon is definitely one of the simplest and easiest ways to get a cool font on your site.

  3. Paul Salmon says:

    I knew about the web sites not being displayed properly if the visitor didn’t have the font installed. I didn’t now about the ability to render the font on the server using the Cufon script. I usually stay with the standard fonts that are usually installed on a client’s machine, and also provide substitute fonts to be sure.

    Does the Cufon script add much overhead to a page request?

    1. Not at all. Cufon is very lightweight and I didn’t notice a slowdown at all. I don’t have any benchmarks to go by, but I’ve not seen it negatively affect load time.

      Thanks for your comment. Much appreciated

  4. Debra says:

    Dave, this is awesome. I was installing All-in-One Cufon on one of my test domains and couldn’t figure out why it wasn’t working correctly. After reading your post, I realized I needed a js version of my font.

    Thanks so much,


    1. Ahhh, I don’t have any experience with that plugin, but I assume the process is similar. Glad you were able to find the answer at any rate!

  5. Hello Dave. I bumped into this post and so I tried the Cufón plugin, as I’ve just started to build my own pro website ( ). Cufón is awesome. I remember long ago trying to use sIFR… awful! So, I’ve already cuffonized some of my text but as I am no expert in programming (very little idea about CSS) unfortunately I am not getting very far… I don’t know how cuffonize with two different fonts! – I’d like one kind of font in the “header” (my name, at the top) and another kind in the Menu Nav. I’ve spent ages checking all but nothing :-( I have activated both fonts in the All-in-one Cufon WP plugin, I have tried all codes, searching google for examples… nothing works. Even your formula shown above:

    Cufon.set(‘fontFamily’, ‘nevis_700’);

    Cufon.set(‘fontFamily’, ‘oldsansblack’);

    …does not work for me. Obviosuly I have replaced your fonts name with mine.

    I wish an expert like you could help me. Your advice would be very much appreciated. Regards from Spain.

    1. Hi Marcos,

      In your comment you said that you have replaced the font names with your own, but have you also replaced the CSS classes with the CSS classes that you’re trying to use the font on?

  6. Hello again Dave. Thanks for replying to my help! comment.
    The answer is yes, I replaced the CSS class with the CSS class I want to change.
    Just let me give you a simple example, in the context of the “Twenty Ten” WP default Theme.
    Please see the following 2 screen captures:
    I’m following your indications but it seems that they don’t work for me!
    Any comments…? :-)

    1. Try taking the .font off of the end of Parisine_700. Your second screenshot shows that the code is correctly formatted to allow the Cufon replacement, but the first screenshot proves that it’s not finding the font that you’re telling it to get, so it’s ignoring the code. Taking off the .font should resolve it.

  7. Name says:

    Great article. However after trying this I ran into 2 issues;
    1. My text is not selectable like yours on this page, instead it appears to be composed of smaller bits almost like images. Pretty sure this does no good for SEO.
    2. I use this for my H2’s but I cannot figure out how to change the color for each H2 – so for instance if I had 5 posts each H2 title would have a different color. Is this even possible?

    1. I don’t think it affects SEO at all – I’ve had it installed on several sites before and they’ve all been read by spiders without any problems. I don’t use Cufon on my current design, but when I used it before, I can confirm that it’s not selectable like normal text, but you should still generally be able to copy and paste the text.

      To use a different color for each h2 would require you to assign a different CSS class to each h2 and then define the color for each.

  8. Sam Orchard says:

    Cufon is fantastic. Because the effect is applied using javascript, it makes absolutely no difference to SEO whatsoever. Search engines just see the standard text.

    1. That’s right. Your text can still be read by search engines, so you’re not causing yourself any problems there.

      1. techfurious says:

        Correct. As a matter of fact, just view the page source. While the text is not selectable after rendering and appears almost to be an image, the page source reveals the actual text. this is what the spiders will read. So it won’t affect SEO.

        1. That’s a good point. You can always view the page source to see how search engines will see your site. Thanks Paul

  9. Thanks a lot for this article and plugin Dave. Now I can change the way they see my new wordpress blog.I will be playing with the fonts that come with office though, just to be sure. Thanks again!

    1. I hope everything works out for you Robert. Let me know if you have any troubles getting it installed.

  10. Sam says:

    OK, so there is something driving me crazy. I understand the basics of using cufon and can do the above. HOWEVER, how do you handle wanting ONLY one type of text within a div to have a different font. For example, I want the h3 in my sidebars to have one font BUT NOT the h3 in the rest of the text. I have tried multiple things but nothing seems to help. Thanks,

    1. Hi Sam,

      It depends on how explicit your stylesheet currently is. Your stylesheet may already have an h3 declaration that is specific to the sidebar (probably #sidebar h3 or similar), in which case that is what you’ll use in the Cufon replacement code. If it doesn’t, you can simply create one in your stylesheet by copying the h3 declarations already there (so that it matches your other h3 text) and then apply Cufon to your new CSS class. Does that make sense?

      1. Sam says:

        Hi Dave:

        Thanks for taking the time to reply. I am hoping to get help with the exact convention. So for example, let’s say its h3 and sidebar. What do I write? Is it:
        Cufon.set(‘fontFamily’, ‘nevis_700’).replace(‘h3#sidebar’);

        or is it
        Cufon.set(‘fontFamily’, ‘nevis_700’).replace(‘.h3#sidebar’);

        Cufon.set(‘fontFamily’, ‘nevis_700’).replace(‘#h3.sidebar’);

        Please advise for exact syntax. Thanks in advance!

        1. It depends on the exact way that your CSS is set up, but more than likely it would be:

          Cufon.set(‘fontFamily’, ‘nevis_700′).replace(‘#sidebar h3’);

          1. Sam says:

            OK, so I have tried what you recommended, and I absolutely can’t get it to work. Here is the code I put in:

            Cufon.set (‘fontFamily’, ‘Hominis’).replace(‘#sidebar h3’);

            It refuses to change the title font of my sidebar widgets. My site is:
   Advice would be really really appreciated! Sam

          2. Try replacing #sidebar h3 with .sidebar h3 :)

  11. Patrick says:

    I’ve just started using cufon when building themes, it seemed a little bit stodgy at first to get it implimented, but it’s actually quite straightforward.

    The more people that use it, the prettier the internet will get!


    1. Indeed, it’s a little iffy the first time around because the technique is new, but it is indeed very easy to work with when you know how.

      And it expands your design possibilities vastly rather than having to stick with eight or so font families.

      Thanks for the comment :)

  12. Patrick says:

    Can you explain how to use cufon to replace the fonts in a wordpress main menu?

    1. It’s the process as described above – the only thing that would be particular to your requirements would be to ensure that you use the correct div class to replace with Cufon. If you use Chrome, right click on the text that you want to change and select “Inspect Element”. The bottom pane that appears will then tell you the div class that you need to specify for replacement.

  13. Dale says:

    You said, “The trouble is that in most cases, the end user won’t have the font installed on their machine which would naturally stop them from being able to see it as the designer intended.”
    What would it look like to the end user if the font isn’t installed on the server and if the end user doesn’t have the font installed on their machine?

    Thanks for showing how to use and install the Cufon script. I will definitely be taking a look at it…


    1. If the end user doesn’t have the font installed, the browser will use the default font from the settings, which is usually something like Times New Roman. Which will just look awful :)

  14. Shawn says:

    “a script called Cufon, which renders the font on the server, rather than on the client, so it doesn’t matter whether the end user has the font installed or not – it can still be displayed properly”
    Cufon is a javascript file and is rendered executed by your browser (the client) by drawing vector images on an html canvas. It actually only makes things more complicated than they need to be. Any browser capable of rendering a Cfuon font is more than capable of rendering a custom font via CSS… using CSS saves space too.

    1. Of course, but unless the client has the font installed, then it can’t be displayed. Unless there’s some way to create fonts in CSS that I don’t know about.

Leave a Reply