Sign up ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?


Browsers: newest versions

different rendring Chrome and Firefox

Thank you

share|improve this question
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
See this question here:… – DA01 Jun 17 '14 at 17:01
@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

2 Answers 2

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:

share|improve this answer

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

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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