svgsvg-font

SVG fonts on FF and IE9 -- css fonts work in svg but svg fonts don't?


I am trying to create SVG text that looks as similar as possible across different browsers.

I know in theory that neither Firefox nor IE 9 support SVG fonts. However, I am confused as to why they both seem to be able to pick up my fonts downloaded from Typekit.

If you look at this example, http://www.concord.org/~sfentress/test-svg2.html, you'll see two examples that are trying to use the "Museo" font.

The first one just specifies "font-family="'museo-slab'", a font downloaded from Typekit. The second one links directly to an svg font file, museo-sans-500, on the server.

On Chrome both fonts are rendered correctly, but on both Firefox and IE only the first one does. This seems very strange to me -- I would have expected either both to work or neither to work.

How are Firefox and IE able to render the first font correctly but not the second?


Solution

  • Neither Firefox nor Internet explorer support SVG fonts, (as you said). Your first font is not a font made of SVG glyphs, so it renders properly. I see that support for SVG fonts in these browsers may be in the works soon, but until then, they will not render fonts defined by SVG glyphs.