SVG doesn't render fonts in Firefox (works in IE9 and Chrome)

Question

I've got vector logo in PSD file. When I export it as AI (Adobe Illustrator) file and then convert to SVG I get something like this:

<tspan
             x="0 34.799999 68.75"
             y="0"
             id="tspan22"
             style="font-size:50px;font-variant:normal;font-weight:bold;font-stretch:normal;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;font-family:Novecento wide Book;-inkscape-font-specification:Novecentowide-Bold">AI</tspan>

This is only a short part of full SVG file but you can see that it creates letters and attempts to use fonts. Which fails...

I rather want it to export SVG file as stand-alone vector that doesn't require any fonts. How can this be done?

Answer 1

Two possibilities:

1. Try putting single-quotes around the font-family name, under the assumption that Firefox is not recognizing the whole string, as so:

   font-family:'Novecento wide Book';

2. Try converting the Text within AI or PSD to a Vector / Shape before exporting as SVG. That will remove the reliance on any font-family, which is a consideration especially if you intend to publish this on the Web. Should work perfectly that way.

Answer 2

Right click on the text in a vector program like illustrator and select outline text. This will keep your font no matter which browser.

Answer 3

I have used embedded fonts this way in IE11, Chrome and Firefox with no issues:

<svg...>
    <text transform="matrix(1 0 0 1 52.1787 206.4395)" fill="#F7F7F7" font-family="'Roboto'" font-weight="400" font-size="16">Lorem Ipsum</text>
</svg>

Note the font-family attribute is doublequoted. Thats the way illustrator does it. Take note to use the proper fontface name. Illustrator for examples likes to put "'Roboto-Regular'" which could be not the proper name of the font-face