When writing a document we’re used to being able to select from a list of many different types of fonts. While the web can use many fonts the process of font selection can be challenging to those setting up a new site. Often one of the early questions I get is “Why can’t I use my super-duper extra special font on a web page?”
Historically fonts have been rendered by the web browser. This means that if the font isn’t installed on a reader’s computer, the font won’t render as expected on the browser. Unlike other tools (primarily Adobe’s pdf format) the web doesn’t embed the fonts in a document; rather the browser will get an appropriate font from a font family that the web developer specifies in the document. For this reason, we’ve developed a list of web safe fonts – fonts that are pretty much assured to be available on any relatively recent computer.
Whoa, what’s a font family? A font family is simply a set of related fonts grouped together. Cssfontstack.com does a good job showing all the major font families currently used. A font family lists the preferred fonts in order; if the first font isn’t found on the reader’s computer, the next font listed will be used. This process progresses from the most specific font to the most general since the most general font will, almost always, be found.
Most of the time this process works well; however, there are cases when the current state of web fonts is clearly broken. What if you want to use a specific font that isn’t assured to be found on a reader’s computer? The common solution was to use the desired font in a graphic image. This works for small parts of a page but is unwieldy for entire pages. This method also severely impacts search engine optimization. Needless to say making significant content changes is a major pain using this process.
There have been a number of attempts to incorporate fonts into web pages. Until recently, most of these methods have had significant shortcomings. There are some good tools available now. Google has a web font service that will embed public domain or free fonts into a web page. Google has many fonts available; these may work for some purposes, but designers looking for a specific fonts will be disappointed. We also use MyFonts, a service that offers licensed fonts for both print and web. They do have a large selection of fonts, but most of these fonts have a licensing fee. Unless your site has very large traffic, the fees are small.
Each of these solutions requires that the font file be downloaded along with the web page so there’s an overhead in using fonts. For one or two fonts this isn’t much of a concern, but downloading many fonts will adversely impact the speed of your site. I suggest not using more than two or three fonts and being careful to only download the fonts on pages requiring those fonts.
CSS3 has the ability to include any font definition via the @font-face declaration; this feature certainly makes more fonts available. However, be sure to check out your font license to ensure that you can use a specific font on a web page. Just because you have a license to use a font in a document doesn’t mean you can use it in @font-face. Typically fonts licenses for web use are sold separately.
Web fonts are evolving and you’re not limited to a small selection of fonts any more. At the same time be aware of the costs of using downloadable web fonts.