Menu
I have an SVG that displays fine in Chrome, but when I use it in an HTML page, it doesn't use the right font, instead using the default.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
<![CDATA[
/* latin-ext */
@font-face {
font-family: 'Roboto-Black';
src: url(./Roboto-Black.ttf)
}
]]>
</style>
</defs>
<text style="font-family: 'Roboto-Black'; font-weight:normal;" transform="matrix(1, 0, 0, 1, 239.2, 51.394)">
<tspan x="-101.469" y="27" font-family="Roboto-Black" font-size="72" fill="#000000">TEST</tspan>
</text>
</svg>
The SVG displays fine in Chrome, but when displayed in an HTML page, it doesn't use the right font.
<html>
<head></head>
<body>
<img src="test.svg" width="100%">
</body>
</html>
What am I missing?
Addendum: Although a valid solution was offered below, I found it was easier to include the svg code directly in the html, instead of referencing an svg file. That way the problem doesn't arise.
508
When used as an image (via an html <img> tag, an SVG <image> tag or as a CSS background-image) SVG must be consist of a single file in order to protect user privacy.
You can use a font, but you'll need to convert the font data to a data URI and embed the font in the SVG file.
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
