Specifications

- 81 -
Compatible Browsers
WebINK uses the @font-face capability of a browser to deliver fonts. Different browsers offer different levels of
support for this capability. WebINK handles the required font formats for most browsers behind the scenes. Some
browser implementations don't support @font-face, and some have limited support; the sections below offer
suggestions for supporting these browsers.
This table lists popular browsers for each major operating system, and the minimum browser version that WebINK
supports.
Browser Mac version Windows version Linux version Mobile version
Chrome 4.0 4.0 4.0 N/A
Firefox
3.5
3.5
3.5
N/A
Internet Explorer N/A 6.0 (Note 1) N/A N/A
Opera 10.53 10.53 N/A N/A
Safari 3.1 3.1 N/A Note 2
WebKit Note 3 Note 3 Note 3 Note 2
1. Internet Explorer does not support using font-weight or font-style within the @font-face declaration. Because of this,
WebINK does not utilize this linking capability of @font-face for any browser; see "Integrating the WebINK CSS into your Website" on
page 78 for a solution.
2. Mobile Safari, the browser used on Apple's iPhone, iPad, and iPod Touch, only supports SVG-format web fonts; see the section below
on experimental support for this in WebINK. (This limitation may also exist in other mobile browsers based on WebKit.)
3. WebKit is the open source basis for Safari and other browsers such as OmniWeb and BumperCar. WebKit implemented @font-face
support in October 2007; WebKit-based browsers released since then may work with WebINK fonts.
Experimental Support for SVG Fonts
Some browsers (most notably the browser on Apple's iPhone and other mobile devices) only support the SVG format
for downloadable fonts. Unfortunately, because SVG is a graphics format and not specifically a font format, the CSS
needed to support these browsers is a little more complicated.
Suitcase Fusion 3 and the WebINK Type Drawer manager do not generate this CSS, but you can manually add the
necessary lines to your CSS and the WebINK server will serve SVG fonts to browsers that require it.
Suppose the CSS for your Type Drawer looks like this:
@font-face {
font-family: Adrenaline;
src: url('http://fnt.webink.com/?drawer=FFFFFFFF-0000-0000-0000-
FFFFFFFFFFFF&font=00000000-FFFF-FFFF-FFFF-000000000000'); }
To add support for SVG fonts, you can add this:
url('http://fnt.webink.com/wfs/?drawer=FFFFFFFF-0000-0000-0000-
FFFFFFFFFFFF&font=00000000-FFFF-FFFF-FFFF-000000000000#font')
format('svg');
So that your CSS looks like this:
@font-face {
font-family: Adrenaline;
src: url('http://fnt.webink.com/?drawer=FFFFFFFF-0000-0000-0000-
FFFFFFFFFFFF&font=00000000-FFFF-FFFF-FFFF-000000000000'),
url('http://fnt.webink.com/wfs/?drawer=FFFFFFFF-0000-0000-0000-
FFFFFFFFFFFF&font=00000000-FFFF-FFFF-FFFF-000000000000#font')
format('svg'); }
The second URL tells WebINK to provide the SVG version of the font. Mobile Safari won't even ask for a web font to
be delivered if the CSS does not include this syntax, so WebINK cannot rely on just one url reference to deliver the
appropriate format font to each individual browser.
You do not need to add this CSS unless you want to specifically include SVG-only browsers such as Mobile Safari in
your web page support. If you do not add this CSS, be sure to include a robust fallback stack so that Mobile Safari
can render your page similar to how a browser that lacks support for @font-face would.