Lets face it – SIFR has one critical drawback. If Adobe Flash isn’t installed on a computer or disabled by a browser, you have standard boring web safe fonts being rendered to a website visitor. If the website was designed with heavy reliance on the typography (more and more are being designed this way), you’ve screwed a great job up due to the very nature of the SIFR text rendering system. That was the only text replacement tool I used, until I found the amazing text rendering system known as Cufon.
How Cufon Is Different:
- Cufon listens to your CSS Stylesheet. Set a line-height, make the font-size larger, add some font-weight… the possibilities are amazing.
- SEO Friendly – If a spider comes on to your blog or website, Cufon will not style the text, allowing them to index it normally.
- Cufon has an option that you can set that allows you to set a colour gradient (IE – #FFFFFF, #1a1a1a will make the text have a white top and dark grey bottom, generating a gradient in between the two values). You can use any CSS2 value and the Cufon system will generate it.
- Unblockable by web browsers (except if they block Javascript, in which case no text rendering engines will work) – No images or Flash is used to create it. It uses VML and Canvas to render the text to the browser.
Cufon may be the text replacement tool of the decade. Allowing you to upload any .TTF font into their website allows you to convert the font into a code that Cufon can read. To activate Cufon for your H1 headings on your webpage, your code would look something like this:
%MINIFYHTML8eba24733f84cf6ec250c355ca03a3af7%%MINIFYHTML8eba24733f84cf6ec250c355ca03a3af8%%MINIFYHTML8eba24733f84cf6ec250c355ca03a3af9%
Not only does it take a few easy steps to set up, you don’t need to edit any configuration files to begin using it. You simply paste the code in your header and select the code to be replaced by the custom font.
Conclusion:
Overall, I think this is the easiest way to put custom text on a website. Due to its ease to set up, the dead simple font conversion, this really makes this the ultimate way to render text.
What font replacement tools or techniques do you use on your website? Is there a better alternative out there than Cufon?
Related posts:
- SEO and Load Time Optimized Wordpress Theme Now Available – “Optimized Overshadowed”
- Are You Missing Out on 14.24% of YOUR Website Conversions?
- Destroy Your Current Blog With This Awesome Tool
Share This Masterfully Crafted Article:
Your vote will help grow this blog and provide awesome content to its readers.
Loading ...
8 Comments
Hey Brad, enlighten me a bit: Why should one use text replacement, instead of say, making it look right via CSS? And what are the effects on performance (I’m very interested in this, being so into blog optimization and all that)
Antti Kokkonen´s last blog ..How To Connect Your Social Media Profiles
Hey there Antti,
By making it look right via CSS, I assume you mean setting the font up using a “font-family” declaration. By using this method, if somone does not have the font installed in their font directory of their local machine, it will render the next text available in the “font-family” for that element.
IE – “font-family: “Myriad Pro”, Georgia, Arial;”
By using Cufon, you are converting it into a canvas which all browsers and visitors will be able to view. This method guarantees that each visitor will view the text element the way that you wanted them to.
Effects on performance – The Cufon file size is 18kb and then the font can range anywhere from 20kb to 60kb, so you will be adding sizable javascript to your website. This will reduce performance, but then again, so will statistic counters, widgets and various Wordpress plugins.
I think its really only noticeable on Dialup, with broadband I don’t think there would be that big of a loading time. (if any at all)
Gotcha. I’ve stayed with the “web safe fonts” so far, which was the reason I haven’t looked into fonts that everyone wouldn’t have. Explains why I didn’t know so much about this kind of text replacement. Now I do, so thank you very much!
Antti Kokkonen´s last blog ..How To Connect Your Social Media Profiles
As you point out, more sites these days are becoming more heavily reliant on typography; will have to look into this as an alternative. Most ppl I know do not allow their browsers to run flash so this is really handy information info. Thanks!
Glad you found the resource useful!
I find that custom fonts offer a little more personality than standard web safe fonts.
Very interesting indeed! There are so many great fonts that deserve to be seen… I’m going to spend some time researching and reading more about this.
Thank you,
Karl
Karl Foxley´s last blog ..10 Wordpress Plugins You Should Be Using!
I agree – The time that each font designer puts into their fonts is incredible. There are some awesome free fonts out there!
Thanks for stopping by, Karl!
Thanks for the info!
I never thought of that. I guess most of the time we take fonts for granted and we just assume that others see the same thing what we see on our computers. We concentrate so much on content, key words, optimization and other things so much so that some other just as important things, gets less attention.
I will be looking into this more.