0

I use a specific font for an SVG on my website (I use font-face to import it) and when I display that svg in Chrome and Firefox, it displays the right font. However, in safari it doesn't - I can still use the font in general HTML (like p tags) in Safari but it don't display within the SVG.

Any ideas why this is happening?

Update:

I know added the font-face directly to the svg. If I open the url for the svg image, it displays with the correct font, but, if I open the webpage with the svg embedded, it doesn't seem to show the correct font.... Any ideas?

Update (19/7/21): I found that even by targeting the SVG path directly there was no way to change the background colour that I could find. I ended up just using a PNG. I will leave this thread unanswered just in case anyone finds the solution.

Saif
  • 422
  • 5
  • 19
  • 1
    Does this answer your question? [Safari and IE can't read TTF and EOT fonts](https://stackoverflow.com/questions/14889045/safari-and-ie-cant-read-ttf-and-eot-fonts) – Justinas Jan 25 '21 at 13:23
  • No, I found the the import wasn't actually the problem. Rather it was the rendering of the SVG within safari as it didn't load the font for the SVG. – Saif Jan 25 '21 at 14:06
  • How are you displaying the SVG when you embed it on the page? Is it an `` or `background-image`? If it is then, the SVGs you link to **must** be self-contained. They cannot link to third-party files. This is due to browser user-privacy rules. – Paul LeBeau Jan 26 '21 at 08:45

0 Answers0