1

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?

2 Answers 2

0

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

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

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

1
  • Good point about SEO. If there's room, are there any drawbacks to separately having a second set of UN-converted text in the exact same color as the background (thus it would be machine readable, but not by humans)? Dec 16, 2021 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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