Specifications

- 67 -
Typically a style rule that defines a font for use on a web page uses what is called a "fallback stack." The purpose of
the fallback stack is to allow the designer to specify the font he or she wants to use, and if that font isn't present, give
the browser other options to "fall back" on.
You will often see something like this rule in a style sheet:
body { font-family: "Helvetica Neue", Arial, sans-serif; }
This tells the browser to first try to use the font Helvetica Neue, and if that's not present use Arial, and if that's not
present, use the browser's default sans-serif font.
Since Helvetica Neue is not a common font on Windows, chances are that many people would see your website in
Arial.
Enter @font-face
Long ago, the keepers of Web standards realized that people would soon grow tired of Arial, Courier, and even
Comic Sans. They devised a way for web pages to use fonts that live somewhere on the web, and not necessarily on
the user's computer. This is the @font-face rule. Unfortunately, while this rule was considered for inclusion in the
CSS2 standard, it was left out, but it is now part of the proposed CSS3 standard.
Fortunately, browser manufacturers knew a good thing when they saw it. As long ago as 1997 Microsoft started
implementing the ability for Internet Explorer to interpret @font-face in style sheets.
The rule looks like this:
@font-face { font-family: Extensium; src: url(http://site/fonts/fontfile.otf); }
The font is located in the file specified by the url. The font-family property in this usage specifies the name that
you will use in the rest of your CSS.
Now you can use the font Extensium at the top of your fallback stack:
body { font-family: Extensium, Utopia, Georgia, serif; }
As long as the browser that is loading the CSS can also access the url where the font file is located, the Extensium
font will be used. It is still a good idea to provide a fallback stack, in case the remote font file is not accessible (if the
server is offline or the file gets corrupted, for example).
Today, enough browsers support the @font-face rule to make it a viable option for web designers to use, finally
breaking the chain tying them to the handful of web-safe fonts.
The drawback is that, in order to have external fonts load correctly on multiple browsers, web designers need to
implement a cumbersome set of rules. But even after implementing these rules (see for example Bulletproof @font-
face syntax, http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/), website owners still have to
make sure they are using properly licensed fonts, and take precautions against font piracy.
What's a person to do?
Implementing the promise of "unlimited" web fonts seems like a daunting challenge. The WebINK font rental service
from Extensis was developed to eliminate the frustrations of using @font-face and licensing fonts for web use. We
have worked with a number of foundries to bring thousands of high quality, low cost fonts together. We have also
built a system to deliver these fonts in the correct format for whatever browser is asking for them. You don't need to
convert the fonts, and you don't need to write special CSS to make sure every browser is supported.
Unlike other font rental services, WebINK doesn't require any special setup on the end user's computer. They don't
need to have Flash, JavaScript, or any other software installed or enabled. When a person visits your page, they see
the fonts you specify. Just like you intended.
Classes
When working with plain vanilla CSS, you will inevitably run into a situation where you want one or more elements on
a page to differ stylistically from their default. For instance, you might want some paragraphs to appear in a script
font.
Not a problem, right? You can use an inline style sheet:
<p style="font-family: 'Comic Sans';">Dear Diary, Today I fell in love!</p>