.svg image that contain text, font-family missing in Firefox

Question

I have .svg image and some text inside with custom font, I am using this image in my css, this is div "background"

https://i.sstatic.net/f8EL6.png

On Chrome and Safary this image works fine, but in Mozilla I have different font, for some reason font replaced by another font

https://i.sstatic.net/wUrot.png

Can it be fixed somehow? where is the issue?

Answer 1

All data in an SVG file when used as an image must be in a single file. If you've referenced a downloadable font as something like this...

src: url('http://example.com/fonts/font.otf');

Then you must convert that to a data URL e.g.

src: url("data:font/opentype;base64,[base64-encoded font here]");

So that all the data is in the one file.