I have a problem with svg backgrounds that render differently in browsers.In Chrome the letters are correctly gill sans light and two words are bold. That's not the case in Firefox. How do I fix this, so it looks like in Chrome across all browsers?

Also - they appear FPS-heavy even though the files are under 1kb. Why is this?

site: http://www.teamgenerous.com

Browsers: newest versions

different rendring Chrome and Firefox

Thank you

  • 1
    Don't you to convert text to outlines before save? – Vnovak Jun 17 '14 at 16:47
  • Have played with Adobe CEF/SVG with and without subset.. no results in Firefox. Only the outline works. – Vnovak Jun 17 '14 at 16:57
  • 3
    See this question here: stackoverflow.com/questions/20905026/… – DA01 Jun 17 '14 at 17:01
  • 1
    @Vnovak you could, but then lose the benefit of having text in the SVG from an accessibility/SEO standpoint. – DA01 Jun 17 '14 at 17:02
  • looks like font need to be hosted at the same host as page.. and it more looks like embedding of font to website. I am not sure, but it can rise copyright issues and will require separate license (similar to web font usage). If so, simpler to run font as web font instead SVG. Can be wrong ;) – Vnovak Jun 17 '14 at 17:06

Actually this is a known "wontfix" bug with Firefox not fully supporting SVG fonts. Once WOFF2 becomes fully supported, Firefox will render SVG font outlines embedded in an OpenType-flavored WOFF 2 font. At least that's the idea. Learn more here: https://bugzilla.mozilla.org/show_bug.cgi?id=119490


because each browser has a default font, for render it, you shall use css normalize like it library , or disable default font with javascript and css


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.