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
Post a Comment