Suitcase Fusion 3 User Guide for Mac OS - Extensis

Browsers Lacking @font-face Support
In order to deliver web content to users with older browsers that lack @font-face support or browsers that
only support SVG web fonts, your CSS should include fallback fonts. You probably already do this anyway, but
as a refresher, here is an example of what you can do to make sure your websites are viewable by a majority of
visitors.
@font-face {
font-family: GrotesqueReg;
src: url('http://fnt.webink.com/wfs/?drawer=00000000-0000-0000-0000-
00000000&font=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFF'); }
body { font-family: GrotesqueReg, 'Lucida Grande', Arial, sans-serif; }
Points to remember:
• Include your target font (the WebINK font) first in the font-family list.
• You can include a less common font in the list. If users have it installed but their browser doesn’t support
WebINK fonts, they will see this font instead.
• Font family names with multiple words need to be enclosed in quotes ('Lucida Grande' in the
example).
• The next-to-last entry in the font-family list should be a common web font. See the list below for
examples.
• The final entry in the list should be a generic font family.
Generic font family Common web fonts
serif Times New Roman, Georgia
sans-serif Verdana, Arial, Tahoma
monospace Courier New, Lucida Sans Typewriter, Andale Mono
cursive
Comic Sans MS, Lucida Handwriting
fantasy Impact, Papyrus
The Code Style web site, another great resource where you can spend hours learning tips and tricks to make
your web designs really pop, has a page of starter font stacks and links to other articles as well as a font stack
builder. See http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml.
A nice overview on font stacks, as well as a clear description of some of the characteristics of fonts that you may
not think about for your fallback stack, can be seen at http://www.slideshare.net/maxdesign/css-fontstacks
(Flash Player is required for the slideshow).
- 93 -