I am trying to achieve my logo to be properly displayed on my website. I have created an SVG icon in Illustrator with a font from Adobe Typekit, it's Proxima Nova. The SVG Icon with text in it show's properly on Chrome, not in Firefox or either any mobile browsers.

Anyone had similar issues before?


It's best practice to convert all fonts into outlines when exporting to SVG, otherwise the font has to be installed on the users OS. As Proxima Nova is not included in any OS font library, the browser uses a different standard font family. Only a few browsers support SVG fonts (see here), thats why it will show a different font even if you have Proxima Nova installed on your OS.

To convert the font, select convert to outline in the saving dialog (see image; sry for german).

This way your logo should show correctly in every browser.

enter image description here

  • Your 'caniuse' link is referring to SVG fonts, not text within SVG. – Cai May 15 '16 at 19:01
  • @Code 3 this did the job, thank you for your answer! – user3194137 May 15 '16 at 21:10

By converting the text to an outline, it will cease to be text and search engines will not be able to index its content (until they can interpret outlines, which is probably coming). Although SVG will support web fonts via CSS, this isn't currently an option with Typekit, which depends upon an embedded JavaScript fragment in a web page. This looks like a programmatic challenge for now; there appears to be a jQuery plugin that will get you most, if not all, of the way: https://github.com/willemvb/svg-typekit

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.