Specifications

- 82 -
NOTE: There have been reports that Mobile Safari does not render a page correctly (and even crashes) if the page
includes multiple fonts from the same family (such as a normal style font and an italics style of the same font). This is
one of the reasons we still label this support "experimental."
Browsers Lacking @font-face Support
In order to deliver web content to users with older browsers or browsers lacking @font-face support, 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 reall 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).