Papermashup

Subscribe


Tweets


"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 2 days ago

"RT @lalpra: Galaxy Note 7 Unboxing https://t.co/FM8gZmqpBK"

@ashleyford 5 days ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Using Cufon font replacement

AshleyAshley

I’d never used Cufon font replacement until a few weeks ago when I was sifting through some code that another designer had written and noticed that he was using Cufon. Not that many people seem to know about Cufon though. Cufon uses a blend of font generator tools and JavaScript to create a custom font renderer in canvas and VML. Here’s how to use Cufon to render the Junction font for all your headers.

Generate the font

first of all you’ll need to head here and convert your font ready for cufon. There are plenty of options to adjust how the font renders, you can include different fonts for weights as well as italic etc.

Include the JavaScript

Once you have your font converted in the Cufon format you’ll need to include the Cufon JavaScript file which you can find here as well as the font file that you converted above.


<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="junction_400.font.js"></script>

Specify your elements


	Cufon.replace('h1, h2, h3', { fontFamily: 'Junction' });

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 15
  • Yuji
    Posted on

    Yuji Yuji

    Reply Author

    Hello everybody!!.. I wrote this code.. I don’t know why it doesn’t work!.. please help me!!

    yujis Technologies!!

    Cufon.replace(‘h1, h2, h3’, { fontFamily: ‘Jellyka – Estrya’s Handwriting’ });

    Yuji’s web site!


  • Mark
    Posted on

    Mark Mark

    Reply Author

    No effect on SEO at all. search engines (web bots) view the site in plain text. and cufon is a javascipt.search engines do not read javascript they only read your original texts


  • rohnn
    Posted on

    rohnn rohnn

    Reply Author

    Had same rendering problem with other fonts on Opera.
    Was using version 9.27.
    Updating to 10+ solved the problem.

    Just a little follow-up fyi.


  • Georgia
    Posted on

    Georgia Georgia

    Reply Author

    cufon font library http://www.cufonfonts.com/


  • rohnn
    Posted on

    rohnn rohnn

    Reply Author

    FYI guys

    Just had an issue with cufon with the font named Caviar-Dreams (free font)
    Bad rendering on Opera (only)
    Here, since the font is GPL, font-face could be much more efficient.


  • David
    Posted on

    David David

    Reply Author

    I’m not a fan of post-DOM font replacement. It feels clunky, and I don’t like the user experience.


  • rohnn
    Posted on

    rohnn rohnn

    Reply Author

    The problem with the google font API is, for now, the limited number of available fonts.

    I suppose it’ll increase. Still, designers will want to use even ‘funkier’ fonts.
    I mean by that, some that aren’t available in ggle font api.
    Why ? dunno, probably to make their marks & feel out of the herd. ( rigth wrong ?? )

    Thus… Back to start. :)

    Still, copyrighted font can only be used, I believe, if you dont want to break the copyright, as images. Unfortunately !


  • Ken the tech
    Posted on

    Ken the tech Ken the tech

    Reply Author

    found that article talking about Google Fonts API as a method of font replacement.

    Here is no doubt that will be no copyright problems in using these fonts as the fonts are stocked on Google servers.

    http://line25.com/tutorials/easy-custom-web-typography-with-google-fonts-api


  • rohnn
    Posted on

    rohnn rohnn

    Reply Author

    @ken,

    the src param of @font-face hold the location of the custom font you want to use, correct ?
    This font file if not present on the user’s machine, it is downloaded and used on the site for display. Therefore, you are distributing this font by providing “the location of a font resource”.

    Even if w3c says “Downloaded fonts are only available to documents that reference them, they should not be made available to other applications or other documents” we all know it fails as the src allows direct access to the font file in clear.

    http://www.w3.org/TR/css3-fonts/#the-font-face-rule


  • Ken the tech
    Posted on

    Ken the tech Ken the tech

    Reply Author

    @rohnn
    hmm, I’ve heard about this but is unclear for me how can you distribute a font when using it on your website.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      Hey Guys,

      Yeah its a tricky one i noticed that Woo Themes use Curfon in some of their themes so i guess they are also distributing the font with the theme.

      I think i’d be inclined only to use Free fonts from the likes of Dafont.com and perhaps add a reference to the font author in the HTML comments of the page.


  • rohnn
    Posted on

    rohnn rohnn

    Reply Author

    @Ashley
    I started using cufon a couple of month ago. Move from Sifr… So happy I did it !
    Cufon is much easier, faster & cross-Browser.

    @ken
    I ended up not using @font-face as I am not the designer but the tech guy and I never know whether the font used is copyrigthed or not.
    However, I dont think cufon clears the copyright issues as you are distributing the font when you are not supposed to.


  • Ken the tech
    Posted on

    Ken the tech Ken the tech

    Reply Author

    you might be right.

    If is like this than is just fine or even better with all of this fonts copyrighted laws over our heads if we use images instead of text.


  • Ken the tech
    Posted on

    Ken the tech Ken the tech

    Reply Author

    I’ve used cufon as a font replacement method for a while until I’ve discovered @font-face method which I recommend to anyone.

    I few days ago I’ve been reading about another font-replacement method, where the fonts are hosted by google and with a call you can access their font library. This is a cool method also.

    As a general idea, I prefer other methods instead of cufon, because cufon is transforming the text in image and is a kind of awful in terms of SEO – all headers (h1, h2, etc) will become automatically images when applying cufon.


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @ Ken,

      Thanks for the feedback I’m yet to use @font-face but i’ll be sure to check it out. Curfon isn’t bad for SEO because the text is always in the page and only replaces it once the DOM has loaded.