Suitcase Fusion 3 User Guide for Mac OS - Extensis

Printing the Web Preview
You may want a physical example of how a website looks with specific fonts applied. You may even want to
show a client multiple versions of his website based on a variety of font choices.
To this end, you can print the Web Preview pane, showing a website as it would look with WebINK fonts, before
you commit to using those fonts.
To print the Web Preview:
1. Load the page to display in the Web Preview pane.
2. Select one or more elements of the preview to customize.
3. Click a font thumbnail to apply to the selected areas.
Repeat the above steps to apply a different font to different elements of the preview.
4. Choose File > Print Preview Pane.
Generating CSS to Use on your Website
At any time, you can create a Cascading Style Sheet from your Type Drawer. You can then integrate this CSS
directly into your websites, or customize it further.
To generate the CSS from a Type Drawer:
1. Select a Type Drawer.
2. Choose File > Export Type Drawer CSS.
3. Enter a name for the file and click Save.
The exported CSS file will have one @font-face entry for each font in your Type Drawer. Each entry will look
something like this:
@font-face {
font-family: single_font_name;
src: url('http://fnt.webink.com/wfs/?drawer=00000000-0000-0000-0000-
00000000&font=FFFFFFFF-FFFF-FFFF-FFFF-FFFFFFFF'); }
The easiest way to use the WebINK CSS is to copy the text from the file and paste it into your existing CSS file.
The WebINK CSS incorporates unique identification information for your Type Drawer. The WebINK service
checks the website requesting the font against those assigned to the Type Drawer. If the requesting website is
not in the drawer, the font will not be available to it. This prevents other websites from using the fonts you are
paying for.
Integrating the WebINK CSS into your Website
WebINK CSS consists of a series of @font-face definitions. @font-face is a part of the proposed CSS3
standard that was first proposed as part of CSS2. Because of this early introduction, many browser vendors
have already integrated support for @font-face. This means WebINK fonts will be displayed properly in most
popular desktop browsers. For a complete list of compatible browsers, see Compatible Browsers.
Once you have generated the WebINK CSS from your Type Drawer, you can integrate it into your website by
copying its contents to your main style sheet.
To integrate the WebINK CSS into your main style sheet:
1. Open your the main CSS file from your website in your web editor.
2. Open the WebINK CSS file.
3. Select all the text in the WebINK file, copy it, and paste it near the top of your main CSS file.
4. Add references to the WebINK font-family entries to your CSS.
5. Save and republish your main CSS file.
Your website will reflect the new styles immediately.
NOTE
If your website is served securely (that is, it uses the HTTPS protocol), then you will need to modify your WebINK
CSS by changing every instance of http: to https:.
- 90 -