We’ve enabled experimental support for iPhone and iPad in WebINK.

Some browsers (most notably the browser on Apple’s iPhone, iPad 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 needs to be slightly modified to support SVG files.

To enable SVG support, you need to make a slight modification to the CSS that is generated by WebINK for your Type Drawers.

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.

NOTE: There have been reports that Mobile Safari does not render a page correctly (and even crashes) if the page includes multiple fonts from the same family (such as a normal style font and an italics style of the same font). This is one of the reasons we still label this support “experimental.”

Comments RSS