CODEWITHSUNDEEP
svgsafarimobile-safari
Matt Young
Matt Young

Reputation: 33

Safari renders text in SVG with a different font

I’m working with an SVG on a website, and everything works fine except in Safari. Safari displays my SVG with a completely different font than what I used for the graphic.

Correct Rendering

This is how it’s supposed to display.

Safari Rendering

This is how Safari renders it.

I don’t have a lot of experience with using SVGs in web design, but I’m using CSS to set it as a background-image like I would anything. I can’t figure out what I’m doing wrong.

.titleContainer{
  background-image: url(‘../img/logo.svg’)
}

Upvotes: 1

Views: 2287

Answers (1)

lipsum
lipsum

Reputation: 89

This is most likely because you should "convert to outline" when you export the SVG from your design program. I could imagine that you selected to embed the font.

Ie in Adobe Illustrator you have the option to outline the font when you export:

Adobe Illustrator example

Upvotes: 6

Related Questions