Everything you wanted to know (but didn’t think to ask) about Web Fonts

Way back when HTML was first created, fonts weren’t a high priority. There were no standards so each web browser determined how fonts displayed. As a result, websites would look different depending on what browser you used.

Take 1 – The Font Tag

To help change that, Netscape introduced the <Font> tag in 1995, which became standard in the second iteration of HTML. The main problem with this approach is the font specified had to be installed on the user's computer or a fallback font would be used. With no standard fonts install on computers, and no standard fallbacks, websites continued to look different depending on the user looking at it.

Take 2 – Font Downloads, CSS, and @Font-Face

In 1997, to promote font consistency among browsers, Internet Explorer (the predominant web browser at the time) added support for font-downloading in IE 4.0. Since then, Safari, Opera, Chrome and Firefox have all jumped onboard and include font downloading as a standard feature.

At the same time IE was addressing the font issue, Cascading Style Sheets (CSS) were being developed to give greater control over how web pages looked. With the emergence of CSS2, the @font-face rule was established. This rule was, and still is, controversial. The @font-face rule allows remote fonts to be freely downloaded. The fear (reality) is that many fonts are used against the terms of their license and illegally spread through the web. TrueDoc (PFR), Embedded OpenType (EOT) and Web Open Font Format (WOFF) are formats designed to address these issues.

Take 3 - We’re Working on It

After all this time, there is still isn’t a standard web font system. To try and finally rectify this problem, the Web Fonts Working Group was chartered in March 2010 with the mission of developing specifications for downloading fonts. The over arching goal of the group was to a set font standards for each specific task on the web (e.g., authoring tools, viewers, etc.). As of this article’s publication date, nothing has been resolved. In the meantime web developers have developed some workarounds.

Current Solutions for Fonts Online

As a general rule, it’s always best to use web safe fonts, a small list of fonts (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html) that are generally installed and look very similar on most modern computers. With the web safe fonts, you’ll know you’re not infringing on any licensing issues and they’ll look good, though not identical, on any browser. However, staying with web safe fonts is not always possible. Businesses with established brands often request or require specific fonts. Your design might call for a font with flavor and the web safe fonts just don’t add the spice you’re looking for. When you have to go outside the lines with non-web safe fonts, the following best practices allow the fonts to render properly on most computers.

Provide downloads

The original idea behind the <font> tag was to use a font the user already has. If you want to use a font they don’t have, you can provide a link to download the font. The clear problem here is few users will go to the trouble. A more insidious problem is you might not have the licensing rights to distribute the font you want to use.

Image replacement

The most widely used method of rendering non-web-safe fonts is image replacement. You use a program like Photoshop or Gimp with sophisticated font tools to build an image out of the text in the font you want it displayed in. You then use the image instead of the text on your website. It’s fairly easy to do and guarantees the text will look exactly the same on all browsers. The disadvantages to this method are:

• text is not selectable
• search engines can’t read it
• the page often takes longer to download

Flash-based solutions

Another common workaround is the Flash-based technique known as Scalable Inman Flash Replacement or (sIFR). This method uses a Flash plug-in as well as Javascript to embed the font in a Flash element to display the text. On the plus side, the fonts are searchable, selectable and scalable. On the downside, this method requires both the Flash plugin and Javascript. If either is not installed, the specialized font doesn’t render and a fallback is used. This method is also very computer intensive and not practical for displaying large amounts of text. It’s best used for headlines and menus and won’t work well for entire sites.

Javascript

Another non-web safe font workaround is a Javascript library like Cufón. To use Cufón, first you convert the font needed into a format Cufón can use on the web. Then when a user views the page, Cufón replaces each character with an image of it in the correct font. You can use almost any font thanks to the conversion process, but this method is very processor intensive and slows down the display of the webpage. It also distributes the font in an unencrypted form, which violates most commercial font licenses.

Hosted Fonts

A number of sites like fonts.com and myfonts.com host large collections of properly licensed fonts that work with the @font-face CSS declaration. Your text will be searchable and selectable, pages load quickly and your site will look the same on all browsers. The only downside is that you’ll usually have to pay a monthly fee for the fonts you use.

Google’s Answer

Instead of trying to figure out a workaround or paying to use a specific font, Google created a quality free font repository that’s simple to use. When using Google’s Font API you won’t need to worry about cross browser capability or understanding how @font-face works, Google handles all of that for you and it works in most browsers. You just link to a special style sheet and reference the font in your CSS as usual. The only real drawback is that you’ve got to use the fonts Google provides. If you’re looking to match a specific font required by someone’s style guide, you’ll probably need to use one of the other methods above.

The Internet is an ever-changing playground with fluid rules and expectations. The great thing about being a web professional is that you can constantly learn new things and try out new ideas. So whether you tend to stick with web safe fonts or like to push the envelope with non-web safe fonts, know that there are options out there.