Suitcase Fusion 3 User Guide for Mac OS - Extensis

A Simple CSS Example
This shows exported WebINK CSS followed by a typical style assignment.
@font-face {
font-family: BigDaddy;
src: url('http://fnt.webink.com/wfs/?drawer=00000000-0000-0000-0000-
00000000&font=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFF'); }
h1 {
font-family: BigDaddy, "Arial Black", sans-serif;
font-size: 40px; }
By including fallback fonts in the h1 definition, you determine how the website will look if the WebINK font is not
available (for example, if the browser visiting your site doesn’t support @font-face).
Why So Many Faces?
The WebINK CSS includes a CSS @font-face entry for each font in your Type Drawer. If you include a font
family that has bold, italic, and bold-italic variants on top of a regular typeface, the exported WebINK CSS will
have four @font-face entries.
You might be tempted to manually link them all to the same font-family and add values for font-style and
font-weight descriptors. While ideally this would greatly simplify your CSS, the reality of the situation is that
some popular browsers do not correctly support this type of style linking.
For the foreseeable future, we recommend that you use the individual @font-face entries in the WebINK CSS
to avoid issues with some browsers.
You can easily modify the tag definitions in your style sheet to accommodate these browser shortcomings.
Example WebINK CSS
The following is CSS from WebINK for a font named “Grotesque” that has bold, italic, and bold-italic variants.
@font-face {
font-family: GrotesqueB;
src: url('http://fnt.webink.com/wfs/?drawer=00000000-0000-0000-0000-
00000000&font=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFF'); }
@font-face {
font-family: GrotesqueBI;
src: url('http://fnt.webink.com/wfs/?drawer=00000000-0000-0000-0000-
00000000&font=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFF'); }
@font-face {
font-family: GrotesqueI;
src: url('http://fnt.webink.com/wfs/?drawer=00000000-0000-0000-0000-
00000000&font=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFF'); }
@font-face {
font-family: GrotesqueReg;
src: url('http://fnt.webink.com/wfs/?drawer=00000000-0000-0000-0000-
00000000&font=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFF'); }
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 combination for bold italic text, you
will need to define that combination, and likewise if you use the reverse notation . 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, sansserif;
}
i { font-family: GrotesqueI, "Arial Italic", Arial-ItalicMT, Arial, sansserif;
}
strong { font-family: GrotesqueB, "Arial Bold", Arial-Bold, Arial, sans-serif; }
- 91 -