Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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...

enter image description here

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

like image 734
Atadj Avatar asked Oct 12 '12 19:10

Atadj


2 Answers

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.

like image 157
Joshua Avatar answered Oct 25 '22 08:10

Joshua


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

like image 24
user3657467 Avatar answered Oct 25 '22 07:10

user3657467