Specifications

- 79 -
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'); }