CODEWITHSUNDEEP
csssvgfontsfont-family
MaDa
MaDa

Reputation: 10762

Setting fallback font for SVG

In a web application I need to display an SVG (with the help of <img src="..."> tag), with text in it. The text uses a totally non-standard font, though:

<tspan font-family="'WTFHeadlineOT-Black'">Example text</tspan>

Browsers fall back to Times New Roman on this, but the customer's wish is that it be Arial. How to force Arial for this particular family?

Note that I'd like to avoid supplying a web font, as it needs to support the whole Unicode scope. I'd like to fall back to the built-in Arial, that in modern OSes covers most writing systems of the world.

Upvotes: 0

Views: 2492

Answers (1)

Erik Dahlstr&#246;m
Erik Dahlstr&#246;m

Reputation: 60976

If you want Arial then simply use that in the font-family attribute. Like squamish ossifrage suggested for example, font-family="'WTFHeadlineOT-Black',Arial,sans-serif".

There's no 100% guarantee that it'll be Arial in the end anyway, as not all systems have it installed, even if most do. For some good fallbacks see e.g http://www.cssfontstack.com/Arial.

Another possibility is converting the text to paths instead, if the look is very important.

Upvotes: 2

Related Questions