Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)
Fed-up with Arial? Tired of Times New Roman? Font-replacement methods have improved dramatically over the past 2 years, but it can be often hard to sort out the different methods if you're not constantly reading about it. This article will discuss various font replacement techniques that are out there right now.
Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site. This tutorial was first published in November of 2010.
We'll look at the pros and cons of each, the issue of font licenses and the best font resources on the web so you can start using them in your own web designs.
Introduction: Font Replacement Methods
"Since the beginning of the web, designers have been restricted to a limited number of fonts"
Typography and font selection are integral elements of any designers arsenal to create the look and ‘feel’ of a website. Unfortunately since the beginning of the web, designers have been restricted to a limited number of fonts. Helvetica, Arial and Georgia are three of the very few appealing fonts (not to forget Comic Sans) that designers can safely rely on to be displayed correctly for the majority of web users.
The traditional method for designers to circumvent such limitations and express creativity with fonts is to incorporate text within images - there are numerous disadvantages to this method however. Several accessibility issues arise and the website’s performance is also adversely affected with increased loading times.
This article will discuss several different exciting methods of incorporating non-standard fonts into your web pages without using images. We will look at the advantages and disadvantages of each method, the issues surrounding the use of fonts and what this technology really means for web designers.
Cufón is a popular choice for many web designers because of its many benefits and relatively few negatives. Its non-reliance on other scripting languages or plug-ins means it is accessible to a very wide audience and it is also supported by recent versions of all the major browsers including IE 9. You can also directly apply CSS styling to Cufón replaced text, including newer CSS 3 features such as gradients. In terms of speed, it is much quicker than sIFR and less intensive, but it still should not be used for large bodies of text.
- Great support over different browsers
- Ability to pick the specific set of characters (ABC, 123, etc.) you want included in your font to manage file size.
- CSS Font-styling is maintained on all browsers (color, size, text-shadow...)
- Text isn't selectable
- Performance: Best used in headers, titles and subtitles.
- Special Styling (text decoration, hover, etc) can require a little extra work.
"@font-face is essentially the ultimate solution for fonts on the web."
@font-face has probably received the most attention of any of the font replacement methods, but there is a very good reason for this. @font-face is essentially the ultimate solution for fonts on the web and one in which all others hoped to replicate before it was fully realised. @font-face was actually included in the CSS2 specification but it has taken until now for widespread adoption.
Unfortunately, as is the case with many other web-related issues, it is primarily the browsers (together with licensing issues which we will discuss below) that have hindered the progress of @font-face. Each of the dominant browsers support different font formats. Internet Explorer uses .EOT (Embedded Open Type) while recent versions of Firefox, Chrome, Safari and Opera all support .ttf (True Type Format). Open Type Format is also supported by a mixture of browsers and SVG (Scalable Vector Graphics) is needed for iPhone and the iPad. It can be all quite confusing and sometimes it can put a lot of people off trying to use it. Thankfully however, there is light on the horizon. Web Open Font Format, or .WOFF, is set to become the standard format for web fonts and is currently being standardised by the W3C. Firefox has supported the format since version 3.6, Chrome since 5.0 and it was announced recently that Internet Explorer 9 also supports the format. Let us hope Opera and Safari join the party soon.
The only other minor issue with @font-face is that because it is presented as actual type, individual browsers and operating systems will all render it slightly differently. Some web font services, which we will discuss further, aim to correct these slight variances using font hinting which smoothes the outline of type in browsers creating more aesthetically pleasing type.
If you would like more information on how to implement @font-face on your website, Jeffrey Way has once again provided a useful tutorial of how to do so.
- Accessibility is maintained - meaning it degrades well.
- Unicode support
- Font Styling (CSS) support
- Some fonts can be heavy to download.
- No common font-file format on all browsers.
- Distribution isn't allowed (to our knowledge) - meaning you can't use this in templates or themes without securing your own distribution license.
The next handful of solutions rely on @font-face to deliver the goods - each of these is a "service" more or less - meaning: they all use the same basic technology, but they offer different font-libraries, licensing options, and payment plans; Yes, most of these require you to pay to use them, but chances are that this is the way of the future for all fonts on the web.
Font Squirrel @font-face Kits
Font Squirrel is perhaps the most popular font-replacement resource at the moment. Font Squirrel relieves any worry you may have about font licenses, as all of the fonts provided are freely available for commercial purposes. The site has hundreds of fonts to choose from, everything from sans-serif to novelty style fonts.
As discussed above, in order to ensure @font-face works across all browsers, you will need several different formats of the font and for this Font Squirrel has a solution. The site offers @font-face kits that provide you with all the formats you need and also includes the HTML and CSS needed as well. If you can’t find the @font-face kit for the font you wish to use, they also provide a generator which will convert your font file into the multiple formats you will need for free. When using the generator, you need to ensure you have the correct licence that permits you to use the font on your website.
- Uses @font-face, but makes implementation a lot easier.
- They handle all licensing issues.
- Hundreds of fonts to pick from.
- Includes multiple formats (TrueType, EOT, WOFF, SVG, Cufon, etc.)
- You can even generate your own kit if they don't have yours.
- Same as @font-face... but for the most part, this is a great solution.
Google Fonts API
Google’s Font API is used in conjunction with their very own font directory in which all of the fonts are open source and available for all to use. The directory is expanding and growing all the time, currently housing over 200 examples.
- Open Source licensing means these are free to use!
- Fonts are served up by Google; So your font might already be in the browser cache.
Typekit was one of the first subscription web font services and still remains hugely popular. Typekit and other similar services address the issue of font licensing by giving users access to a massive range of custom fonts in return for a yearly subscription fee. This method allows the font foundries to receive something in return for their hard work and also ensures against piracy of fonts as all of the fonts are hosted centrally on Typekit’s protected servers. Users of the service are not hosting the fonts on their own web space but are simply linking to them.
Another benefit of Typekit is that it aims to control the variances in how different browsers handle text and fonts using hinting.
Typekit offers various pricing packages to suit differing needs. A free package is available that provides you with two fonts to use from their Trial Library on one website. The website is allowed up to 25,000 page views a month and you must also display the Typekit badge on the site, which links to information about the fonts you are using. At the other end of the scale is the Performance package which gives you access to the full range of fonts available to use on an unlimited amount of websites with no cap on the amount of page views. The Performance provides all of these features for a yearly subscription fee of £99.99.
- Large selection of fonts.
- Fonts are served on Typekit servers.
- Yearly fee.
- Anti-aliasing isn't perfect yet... some fonts can appear "jagged" and non-aliased on some browsers/OS's.
Fonts.com Web Fonts
The popular font resource fonts.com has also launched a specialized web font service, which boasts over 8000 fonts for you to use in your web sites. Similarly to Typekit, it is a subscription-based service except that it is priced on a monthly basis. In comparison with Typekit, it does work out more expensive but there are far fewer restrictions on the fonts. The free package compares very favorably, giving unlimited access to 8000 fonts for you to use on as many web sites as you wish. The Professional package also allows you up to 50 fonts to download and install on your computer to use in your designs.
Fonts.com Web Fonts boasts some truly great typefaces as part of its collection – such as Helvetica, Univers and Franklin Gothic.
- Large selection of fonts and styles.
- Exclusive home of Helvetica®, Frutiger®, Univers® and other celebrated fonts.
- Language support.
- Yearly fee if you want anything more than what their Free service offers.
- Limited to their library (which is actually quite large).
Renowned web design company Clear Left, who have worked for some of the world’s largest businesses, have teamed up with OmniTI and released Font Deck. Font Deck is another subscription-based service except you only pay a yearly fee for each individual font you use, perfect for those who only want to use one or two fonts for their personal blog.
Font prices start at $2.50 per year per domain and are allowed unlimited page views. The whole font selection is also available to try for free for any length of time, although only twenty unique IP addresses will be able to view it. This free package aims to compensate for the fact that you cannot download fonts to your local machine and use them during the design stage. As Font Deck is only relatively new to the scene the selection of fonts to choose from is not currently very big.
- Pay only for what you need.
- Preview fonts on your site for free.
- Language support.
- It still costs money.
- Limited to their library (which is actually quite large).
Font Spring takes a slightly different approach than the subscription based services and reverts back to the traditional way of purchasing fonts. Fonts are purchased individually and require you to download them and host the fonts on your own web server. Font Spring suggests that 99.9% of the fonts available can be used with @font-face.
Each individual font can vary in price and you are required to pay an additional charge for the license to use the font with @font-face. The @font-face license includes the desktop OpenType version of the font and the various formats you will need to use it on the web.
There are many benefits to using this method. If you really have you heart set on just one particular font, it may be the cheaper alternative to subscription services. You can use the font on as many domains as you like, as long as you have direct control of them and there is no limit on the amount of page views.
As an added warning, you are forbidden from converting or embedding the font with other technologies such as sIFR or Cufón.
- Like Font Squirrel, it manages licensing for you.
- Another great library of different foundries.
- Pay-per-font approach can get pricey.
- You have to host your own fonts.
Other Font-Replacement Solutions
These are just a few of the font services available, there are many more such as Typotheque and Webtype. Each has their own positives and negatives and your choice should be based on your own personal needs. Some may enjoy the ease of use of a subscription service, while others may not like the thought of relinquishing some control of their site to a third party. If the latter is the case, you may be better off downloading and hosting your own web fonts with the aid of websites like Font Squirrel.
The next two (sIFR and FLIR) are generally though of as "old school" because they have their fair share of problems, but they are worth discussing and knowing about.
One of the creators of sIFR, Mike Davidson also recognizes the limitations of the technology. Mike has openly stated that sIFR should not be used for large bodies of text as it has a noticeable effect on the performance of the website. Mike also recognizes that his technology is not the final solution to typography on the web and refers to simply as a ‘stopgap’.
- No major pros... other than it was the first font-replacement method on the scene.
- Relies on Flash
- Slow Performance
- Flash and Ad-Blocker programs block it
- Hard to style perfectly - doesn't always behave as expected.
Unfortunately, besides the ease of use and time saving aspect of FLIR, it does not offer much improvement over the traditional method of saving text as images. The end result still remains as text rendered as an image in which the text isn’t selectable or scalable.
- Works on all major browsers
- Bandwidth Heavy
- Text isn't selectable
- Requires PHP and GD on the server... which isn't always a given
Font Licenses and Legalities
The issue with font licenses is an ongoing one and one that has contributed to the slow progress and adoption of font replacement methods. Just as with images, you need permission from the author, in the form of a EULA (End User License Agreement), to use a font on your website. Some licenses permit free use of the font, even for commercial purposes, while others may only allow for personal use on a local machine.
When using one of the font-replacement methods discussed above, you are effectively embedding a font into your website or linking to one that has been uploaded to your web server and this is not allowed by many, even free font licenses. The reason many font creators and foundries do not allow this is because it allows users of the site direct access to the font file and they become concerned that their font may be downloaded and distributed illegally. This problem has prevented many font creators from making their fonts available for use with methods such as @font-face.
It is therefore crucially important that when using one of the methods discussed above that you absolutely make sure that the font license permits it.
Thankfully, this issue hasn’t hindered the development of font-replacement methods completely and there are many resources available to allow you to use custom fonts on your website.
Final Thoughts on What This Means for Designers
"Perfection is not worth waiting for, if you do, you risk missing out on exciting new opportunities"
We have discussed a lot above, and it is clear that there are many options available for those wanting to use custom fonts in their site designs. The good news is all of these methods are available to use right now. It is true; none of the methods are perfect, each have their own good points and bad points. @font-face obviously holds the most promise, but it will probably be a few years yet before it is absolutely bullet-proof. The truth is though the situation is rarely perfect in the world of web design, there will always be compromises and work-arounds needed to implement new technologies. Perfection is not worth waiting for, if you do, you risk missing out on exciting new opportunities.
This is truly an exciting time for web design, and there appears to be a growing appreciation and understanding of Typography on the web. Font replacement methods offer a great opportunity to create innovative new designs and I believe the key is not to abuse this technology. Always provide fallbacks for when things go wrong and use each method sensibly (don’t go changing all the text on your site to this). Take the time to appreciate and learn about great type and the web will be a better place for it.
Have your own thoughts about this? Got a question? If we missed any of your favorite methods, post them below in the comments section and we'll be sure to include it in this post!