Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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.
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
