The Web Designer’s Guide to Font Replacement Methods

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.

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”

The possibilities of design on the web seem to be increasing day by day. The application of technologies such as HTML5, CSS3 and Javascript has resulted in many exciting and innovative website designs. The web appears to have come a long way since the days of the text-only browser. Despite this, there is one aspect of web design that has remained relatively stagnant.

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

Cufón is an incredibly simple and effective method for incorporating non-standard fonts into a web page and one in which its functionality is not dependant on server-side languages or plug-ins. Cufón operates solely on a few lines of Javascript code and uses combination of VML (Vector Mark-up Language), for Internet Explorer, and HTML5’s Canvas feature to render the fonts.

Cufón provides a font converter tool on their homepage that will allow you to convert your chosen font to SVG and creates a Javascript file for you to reference within your HTML. Nettuts+ editor Jeffrey Way has previously written an excellent step-by-step tutorial of how to integrate Cufón into your webpage.

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.

There are some negatives to Cufón however. It does still rely on Javascript to function, which some web users may have switched off. Disappointingly Cufón replaced text is also not able to be selected and therefore copied and pasted.

Pros:

• 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…)

Cons:

• 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

“@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.

@font-face uses no web technology other than CSS to implement custom fonts on a web page – this means there is no longer a reliance on Flash, PHP or even Javascript. Actual type is rendered when using @font-face, instead of vector object or images, and therefore the text is able to be selected, scaled and styled using CSS.

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.

Pros:

• Accessibility is maintained – meaning it degrades well.
• Unicode support
• Font Styling (CSS) support

Cons:

• 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.

Pros:

• 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.

Cons:

• 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.

It really couldn’t be easier to incorporate fonts from the directory into your website. You simply need to select the font you wish to use, select the variants of the font you require and Google will provide you with the one line of Javascript code you need. Adjust your CSS to list the font used and you’re ready to go. It really is that simple!

Pros:

• 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.

Cons:

• erm..

Typekit

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.

Typekit has teamed up with some of the world’s largest font foundries to offer a wide and varying range of fonts for you to use. Typekit gives you a lot of options and control over the fonts you use. Select various font variants, weights and glyphs to use. You can also create CSS stacks and select fallback fonts to use when @font-face isn’t supported. You will also need to select the specific HTML tags or CSS classes to apply the custom font to. Once you are happy with the selections you have made, a piece of Javascript code is generated for you to use on your site.

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.

Pros:

• Large selection of fonts.
• Fonts are served on Typekit servers.

Cons:

• 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.

Pros:

• Large selection of fonts and styles.
• Exclusive home of Helvetica®, Frutiger®, Univers® and other celebrated fonts.
• Language support.

Cons:

• Yearly fee if you want anything more than what their Free service offers.
• Limited to their library (which is actually quite large).

Fontdeck

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.

Pros:

• Pay only for what you need.
• Preview fonts on your site for free.
• Language support.

Cons:

• It still costs money.
• Limited to their library (which is actually quite large).

Font Spring

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.

Pros:

• Like Font Squirrel, it manages licensing for you.
• Another great library of different foundries.

Cons:

• 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.

sIFR

sIFR has been around for some time now. When it first came out, it provided an effective method of incorporating non-standard fonts when there really wasn’t any other option than images. sIFR or Scalable Inman Flash Replacement uses a combination of Flash and Javascript to modify text on web pages into a Flash element. sIFR has many advantages such as the text remains accessible to screen readers and that it can still be selected.

The term ‘scalable’ in the name, however, has the potential to cause confusion. sIFR is scalable in the sense that the Flash element scales to the size of the original browser text – this allows it to display all of the text at the largest size possible within any given dimensions. However, any text that has been replaced with a flash element is not able to adjust when a user resizes text on a page; which obviously causes an accessibility issue. sIFR also requires both Flash and Javascript to be enabled on a user’s computer in order to function.

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’.

Pros:

• No major pros… other than it was the first font-replacement method on the scene.

Cons:

• Relies on Flash
• Slow Performance
• Flash and Ad-Blocker programs block it
• Hard to style perfectly – doesn’t always behave as expected.

FLIR

FLIR or Facelift Image Replacement is similar to sIFR except that it uses Javascript and PHP to generate images instead of Flash in order to replace text. This method has the obvious benefit that you don’t have to spend time creating individual images for each piece of text you want to use a custom font for. If you decide to use a different font or colour for your text it is also much easier to update the text on your website.

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.

Pros:

• Works on all major browsers

Cons:

• 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!