Those 8 words can strike fear in to the heart of the most dedicated developer. Fonts are among the most closely watched items on the web today. The Font foundries are constantly scanning for the illegal use of their fonts; and when they find a website that is using one of their fonts they will send a cease and desist order. What can you do about this?
Remember the "good old days"? There were a handful of fonts that were guaranteed to work across platforms and across browsers. There were 5. Somewhere along the line, the @font-face CSS selector was created. This CSS selector allowed web developers to build font kits, and the world opened up to make your site look *exactly* like you wanted it to without the need for pesky flash substitutions or being forced to use graphics instead of text.
The @font-face CSS selector is not a cure-all, though. Not all fonts are available for conversion for use on the web. Many fonts are covered under restrictive licensing. Many Font Foundry companies have a restrictive use license that prevents it from being converted into a font kit for use on a website. So, before you send that email about the perfect font, make sure that you can use it on your website.
As a developer, I have faced the challenge of a designer using a font that is not available to be placed on the web. There are several things that can be done in this situation:
- Instruct the designers to only use "web available fonts". There are several organizations that offer fonts that are under GPL licensing, or free for use on websites. This is by far the simplest solution. However, once in a while there will be "that font that just makes the site pop".
- Look for suitable replacement fonts. Utilize one of the sites that serves up font kits. A good list can be found here
- Utilize older technology to display the font such as SIFR (which doesn't work on mobile, as it is flash based)
- Utilize graphics and limit the font to specific items.
- Contact the Font Foundry about purchasing a web use license for the font you would like to use.
As you develop your site, remember that not all fonts are created equal, and all fonts have some kind of licensing attached to them. It is your responsibility to understand and guide your client on proper font selection.
Finally, one thing to keep in mind is that the @font-face CSS call requires downloading the font kit from your website. This increases the bandwidth your site uses, as well as slows your site down. Google now considers user experience in their search engine rankings and Google does not like slow websites! If you have a graphic intensive website, you may want to consider using one of the web-safe fonts. W3 schools has a list of fonts that will work on most systems.