Specifications

- 80 -
Modified CSS tags
Here are some CSS tags for the above @font-face elements, modified to utilize multiple font-family
definitions. Note the definitions for combined tags; if you use the <b><i> combination for bold italic text, you will
need to define that combination, and likewise if you use the reverse notation <i><b>. By defining this combination to
use the actual bold-italic variant of the font, you avoid having the operating system or browser attempt to create its
own variant from the base font (which usually has less than desirable results), or worse, in the case of some
browsers, fall back to using the plain font.
body { font-family: GrotesqueReg, Arial, sans-serif; }
em { font-family: GrotesqueI, "Arial Italic", Arial-ItalicMT, Arial, sans-
serif; }
i { font-family: GrotesqueI, "Arial Italic", Arial-ItalicMT, Arial, sans-
serif; }
strong { font-family: GrotesqueB, "Arial Bold", Arial-Bold, Arial, sans-serif; }
b { font-family: GrotesqueB, "Arial Bold", Arial-Bold, Arial, sans-serif; }
b i { font-family: GrotesqueBI, "Arial Bold Italic", Arial-BoldItalicMT, Arial,
sans-serif; }
i b { font-family: GrotesqueBI, "Arial Bold Italic", Arial-BoldItalicMT, Arial,
sans-serif; }
Note also that we use styled font names in the fallback stack so that if the browser does need to use a different font,
your style intentions are still maintained. To accommodate different browsers on different platforms, we include both
the English font name and the Postscript name (such as Arial-ItalicMT).
Obviously, depending on your preferred approach, you won't need to define both b i and i b combinations.
However, if you use a different face for headings (h1, h2, and so on) for example, you may find that you will need to
specify bold or italic (or both) specifically for those tags:
@font-face {
font-family: SlabberHeavy;
src: url('http://fnt.webink.com/wfs/?drawer=00000000-0000-0000-0000-
00000000&font=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFF'); }
@font-face {
font-family: SlabberHeavyItalic;
src: url('http://fnt.webink.com/wfs/?drawer=00000000-0000-0000-0000-
00000000&font=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFF'); }
h1 {font-family: SlabberHeavy, "Arial Bold", Arial-Bold, sans-serif; }
h1 i {font-family: SlabberHeavyItalic, "Arial Bold Italic", Airal-BoldItalicMT,
Arial, sans-serif; }