iphone - ios safari won't display font-face embedded fonts in svg files. any fix? -


so have svg file, contains text elements. example:

<text transform="matrix(1 0 0 1 195.248 207.165)" fill="#999999" font-family="'leaguegothic'" font-size="24">europe</text> 

when specify font-family included in ios (like helvetica or futura), works fine. however, once specify font included through @font-face, doesn't work on ios, while on desktop safari, chrome, firefox opera.

otherwise @font-face fonts work ok throughout page, except svg parts.

tried including svg file <embed>, <object> , <img>, didn't help. interestingly, when try inline svg (i.e. svg code directly within html), fonts ok, doesn't draw else form svg file.

i on ios 4.2. tried svg 1.1, 1.1 tiny, 1.2, etc. same.

is bug or missing something, please? thanks.

sample svg file here: http://pastie.org/1637291

your svg sample has no @font-face rule, nor references external stylesheets. maybe solution include stylesheet definition in svg file itself.

for example:

<style> @font-face { font-family: foo; src: url(somefont.svg#thefontelementid) format("svg"); } </style> 

if referencing svg parts e.g <object>, <embed>, <iframe> or <img> , see webfont elsewhere on page missing stylesheet thing cause.


Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -