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/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?
155 Comments
This is the perfect, unique method to use fonts! I have been using @font-face, but it had lots of problems… specially browser related and most importantly on Internet Explorer. Thank you for sharing this!
For wordpress websites, you can use this plugin. It is easy to use, uses @font-face and automatically converts your font to required file format.
http://wordpress.org/extend/plugins/use-any-font/
Very Nice. I was looking for something to bring me up to speed on using custom fonts on the web.
@KIRKOCONNOR: I just felt that it was worth noting that search engines do not “crawl” your pages by “copying & pasting” from the visual but by going through your site code side. The image replacement techniques still have the content within the source file which it can read.
@Colin Gould: Keep in mind at the time of this article the Google Font API did not exist as it was start in May of the same year. But the issue with Google Fonts is if you start to use this several times across your site, it will weigh heavy on your loading.
@Quote Three: Since this article, it has now become the preferred method to use @font-face when you’re needing these fonts.
Just what I as looking for. Now going to go and see if I can make my site look great with a new font.
Cheers.
Nice article, although Google Web Fonts should also get a mention. I’d recommend that and @font-face for open-licensed fonts in cases where large chunks of text need to be rendered and you’re not too fussy about some browser quirks.
For cases where you want a small amount of text rendered using your custom or licenced fonts that works across all browsers/platforms I created renderedfont.com that uses javascript to perform image substitution. I’d be happy for your considered opinion on that.
Hmmm, good article
Cufon is best..
very useful and important article to improve the website typography.
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.
Thanks for the pros/cons and examples of each!
Very useful information. I just tried it and I love it. Thanks for the great article.
thanks for the @font-face share.
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.
Awesome information. @font-face is going to revolutionize the web!
Cufon Is my choice of font replacement!
@Stephen walker: only the basic package for typekit is free, correct? I’d rather create my own and not pay some service.
This is old hat. Join the web type revolution at typekit.com !
Unbelieveable.
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.
Thanks Man!
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.
Superb technique. Definatly going to give this a try with the Golf Royalty redesign at Easter. Thanks!
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.
Louis, this is the most complete post about the ways we can use any font in our design. Well done!
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.
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.
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.
@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.
What about TypeKit?
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.
Very Nice. 🙂 I was looking for something to bring me up to speed on using custom fonts on the web.
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.
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 🙂
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.
@Greg Thanks… I’ve updated the post on the issues I was incorrect about. Thanks for the heads up.
Quite cool effect… will definitely use it…
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.
You mentioned that siFR doesn’t display on an iPhone yet. What about FLIR and Cufon?
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.
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!
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.
very useful post. Great job Louis. SIFR is my fav.
Actually with Cufon, you can have a hover state. You just need to declare your doc type as XHTML Strict. Good article!!