How to Use Any Font on the Web
As a designer, typography is a very important aspect to my work. Now as far as print design, implementing any form of type isn’t a problem, but when it comes to the web then there’s only a certain amount of fonts you can use, right? WRONG.
In the last couple of years, there has been some growth in using other typefaces on the web. CSS allows developers to use a property called @font-face to define a new typeface and these fonts are 100% SEO friendly. Some fonts can be purchased for embedding, however those license fees are usually out of reach for small companies or individuals - Greg Tarnoff. The issues surrounding @font-face are that downloading and sharing fonts via this attribute is breaking copyright laws.
With that in mind, the four methods that I am going to discuss are SIFR, FLIR, Cufon and Typeface.js.
siFR (Scalable Inman Flash Replacement) – JavaScript AND Flash
http://www.mikeindustries.com/blog/sifr
sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of JavaScript, CSS, and Flash.
- Pros:
- Accessible, selectable and most important cross browser compatible.
- Does not violate EULA or copyrights, since font is contained within the SWF object.
- You can easily add shadows and other text effects in Flash
- Cons:
- Slower page loading – has to request for Flash, JavaScript and CSS files
- Requires both JavaScript and Flash to be enabled
- Flash plugin must be installed in the browser
- Cannot display on an iPhone. Yet…
siFR elsewhere:
Convertor:
FLIR (Facelift Image Replacement) – JavaScript and PHP
An image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via JavaScript and PHP and visible to all modern browsers.
- Pros:
- Does not violate EULA or copyrights, since font is rendered as an image
- Prints in the font rendered since it is an image
- Cons:
- Requires PHP with the GD enabled
- Text cannot be selected
FLIR elsewhere:
Download:
Cufon – JavaScript
Cufon is basically a new and improved version of Typeface.js, with a focus on faster and easier implementation and no Flash or images required.
- Pros:
- Do not need to load the Flash plugin which makes it fast, even for sufficiently large amounts of text
- work on every major browser
- close to zero configuration needed
- Cons:
- Not many fonts are permitted to be rendered with this method
- the JavaScript files used for the font can be easily reverse engineered and “stolen” which violates EULA and copyright laws
- Inability to highlight and copy/paste text
Cufon elsewhere:
Convertor:
Typeface.js – JavaScript
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.
- Pros:
- User doesn’t have to have Flash plugin installed on their browser
- Easier to create with just a few lines of JavaScript
- Cons:
- Recommended to use only for headlines because too much text will slow down page load
- Cannot be read by screen readers
- Not all browser compliant and still has a lot of development left to be done
Typeface elsewhere:
Convertor:
Conclusion
Which method is better? All of them perform wonderfully for large header text but all are very different from one another. It is up to you as the developer to determine what is important to you… does it load fast, is it selectable, does it work in every browser?
Who would you rather use?
Posted on February 5, 2010 at 2:06 pm
Tweets about this post elsewhere...
Enjoy the article? Share it!
Stay Current
We will continue to find more and more interesting topics over time, so make sure to keep yourself up to date using ourRSS Feed or Email Subscription.
Read more! Here are some similar posts:
February 5th, 2010 @ 2:21 pm
Actually with Cufon, you can have a hover state. You just need to declare your doc type as XHTML Strict. Good article!!
February 5th, 2010 @ 2:25 pm
Social comments and analytics for this post…
This post was mentioned on Twitter by iBlend: How to Use Any Font on the Web http://bt.io/ERk3...
February 5th, 2010 @ 2:38 pm
very useful post. Great job Louis. SIFR is my fav.
February 5th, 2010 @ 2:42 pm
You should also include typekit. I just used it on my site and it workds beautifully. I linked to it in my name if you wanna check it out. Cheers.
February 5th, 2010 @ 2:51 pm
Great comparison with the mostly used techniques, together with examples and “pro’s and con’s”. Used sIFR on my website too, but removed it later on
.
Loved the read, great!
February 5th, 2010 @ 2:53 pm
We used Cufón for our site, OriginDH.com and it works great. Contrary to what you mention above, though, when we were proofing it before launch we noticed one browser (I forget off hand) does allow hover states.
I haven’t tried the others.
Great round up.
February 5th, 2010 @ 2:54 pm
You mentioned that siFR doesn’t display on an iPhone yet. What about FLIR and Cufon?
February 5th, 2010 @ 2:59 pm
You may be a little misled when it comes to @font-face rules.
1) No @font-face rules require JavaScript. @font-face is a CSS rule that has been around for years and was added in because IE supported it, which
2) IE5.5+ support @font-face BUT you have to use a special type of font called EOT. TTF & OTF won’t work. (better yet use FIrefox).
3) Copyright…you aren’t completely wrong here. The key is to find fonts that allow for distribution across the web. there are plenty of free fonts you can use, and some foundry fonts can be purchased for embedding. However those license fees are usually out of reach for small companies or individuals.
Check out http://www.fontsquirrel.com for some free @font-face kits that include OTF (if applicable), TTF, EOT, WOTF (a new web standard) and all the CSS you need to make typography work on your site.
The biggest thing to warn against: don’t use too many fonts as it will increase the weight of your pages.
February 5th, 2010 @ 3:09 pm
Quite cool effect… will definitely use it…
February 5th, 2010 @ 3:12 pm
@Greg Thanks… I’ve updated the post on the issues I was incorrect about. Thanks for the heads up.
February 5th, 2010 @ 3:26 pm
I’ve used a mix of methods, but these days I have a TypeKit (http://typekit.com) account that I’m a fan of (it uses JS). Definitely affects page load times, but worth it.
This is an area that the web will continue to grow into. In the meantime, we’ll keep being creative so we can be… creative.
February 5th, 2010 @ 3:28 pm
Have a look at font2style.com!
It will use only @font-face CSS rule.
My blog already uses its method to style the text and it will be soon available
February 5th, 2010 @ 3:47 pm
I have used both Cufon and sifr and think they are great tools, the only thing that makes me balk at using them is how they effect page speed and load time. But if you don’t have to much going on in your design and you want to give your page some pop, using a unique font certainly does that.
February 5th, 2010 @ 5:21 pm
Very Nice.
I was looking for something to bring me up to speed on using custom fonts on the web.
February 5th, 2010 @ 6:03 pm
As some have mentioned before me, no js or flash is still the best way. Use the @font-face CSS3 rule. And check out http://www.font-face.com, the home of @font-face, which are launching soon (full disclosure: I am involved in the site). Fonts for your site, we take care of everything. Beta invite out soon, don’t forget to register if you are interested.
February 5th, 2010 @ 6:58 pm
What about TypeKit?
February 5th, 2010 @ 7:21 pm
Cufon DOES allow one to copy/paste text it has replaced. I just used it on a piece, mirrored here: http://clients.ohtwentyone.com/kidsmoneyschool/comingSoon/index.html
I tested it. It works.
February 5th, 2010 @ 7:29 pm
There is no way I would sacrifice the SEO value from my headings for any font replacement system.
Cufon and Typeface.js look best from an SEO perspective.
February 5th, 2010 @ 7:32 pm
obviously Google is heading down a track where page load speed is also going to have some effect on SEO value as well so anything that screws significantly with page load time is going to have not only a negative effect on user experience but also on your ranking.
February 5th, 2010 @ 7:51 pm
@Jon, I just went to your link and couldn’t copy any of the Cufon text. What browser are you using? Can someone else give it a try? Thanks.
February 5th, 2010 @ 9:04 pm
Louis, this is the most complete post about the ways we can use any font in our design. Well done!
February 5th, 2010 @ 10:40 pm
This is great, and definitely something that I do want to learn more about. The only concern that I do have is whether or not using Javascript will impact SEO. For example, using text in headings and in H1 tags, being in Javascript, this would all but render those keywords in headings nothing but mere gap fillers.
February 6th, 2010 @ 4:05 am
Superb technique. Definatly going to give this a try with the Golf Royalty redesign at Easter. Thanks!
February 6th, 2010 @ 9:05 am
How to Use Any Font on the Web…
Four methods that I am going to discuss are SIFR, FLIR, Cufon and Typeface.js….
February 6th, 2010 @ 10:09 am
[...] How to use any font on the web Share and Enjoy: [...]
February 7th, 2010 @ 9:16 am
[...] How to use any font on the web [...]
February 7th, 2010 @ 1:30 pm
I was a sifr fan for 2.5 years, but recently made the jump to Cufon, because sometimes Chrome has issues with sifr. Also, Cufon is much easier to style than sifr.
Typekit also looks promising, but the biggest drawback for me is depending on the browser’s anti-aliasing which is good on OS X, but terrible in Windows.
February 7th, 2010 @ 7:32 pm
Thanks Man!
February 8th, 2010 @ 6:03 am
[...] How to use any font on the web (interactiveblend.com) [...]
February 8th, 2010 @ 6:22 am
Have been using sIFR for a while but replaced it recently on a few sites with Cufon. But yeah, the licenses on some fonts do make it a little troublesome.
February 8th, 2010 @ 9:31 am
This is old hat. Join the web type revolution at typekit.com !
Unbelieveable.
February 8th, 2010 @ 10:24 am
[...] This post was mentioned on Twitter by . said: [...]
February 8th, 2010 @ 2:13 pm
@Stephen walker: only the basic package for typekit is free, correct? I’d rather create my own and not pay some service.
February 9th, 2010 @ 3:18 pm
Cufon Is my choice of font replacement!
February 9th, 2010 @ 7:43 pm
Awesome information. @font-face is going to revolutionize the web!
February 17th, 2010 @ 12:16 pm
been using @font-face for awhile for our commercial projects. Just have to check the licensing requirements for the font and make sure you are not violating it. We take this into consideration when we are designing sites.
February 23rd, 2010 @ 10:29 am
thanks for the @font-face share.
April 4th, 2010 @ 10:46 pm
Very useful information. I just tried it and I love it. Thanks for the great article.
April 30th, 2010 @ 8:10 am
Thanks for the pros/cons and examples of each!
June 23rd, 2010 @ 10:29 am
I’m with the Cufon style, like it simple and renders my chosen fonts quite well; but thanks for the article, really explnatory and useful for trying out different things.