Suitcase Fusion 3 User Guide for Mac OS - Extensis

The fallback stack
Usually, when you visit a website, your browser is limited to displaying fonts that are present on your computer,
so web designers have been careful to use what have been known as “web-safe” fonts.
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.
- 79 -