So I have a SVG file, that 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 I specify the font-family to something included in iOS (like Helvetica or Futura), everything works fine. However, once I specify a font included through @font-face, it simply doesn't work on iOS, while it does on desktop Safari, Chrome, Firefox as well as Opera.
Otherwise @font-face fonts work ok throughout the page, except the SVG parts.
Tried including the SVG file as <embed>, <object> and <img>, didn't help. Interestingly, when I try inline SVG (i.e. SVG code directly within HTML), then the fonts are ok, but it doesn't draw anything else form the SVG file.
I am on iOS 4.2. Tried SVG 1.1, 1.1 Tiny, 1.2, etc. all the same.
Is this a bug or am I missing something, please? Thanks.
Sample SVG file here: http://pastie.org/1637291
Your svg sample has no @font-face rule, nor references to any external stylesheets. Maybe a solution could be to include a stylesheet with that definition in the svg file itself.
For example:
<style>
@font-face { font-family: foo; src: url(somefont.svg#theFontElementId) format("svg"); }
</style>
If you are referencing the svg parts with e.g <object>, <embed>, <iframe> or <img> and see the webfont elsewhere on the page then that missing stylesheet thing could be the cause.