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.
img
tag do not inherit CSS styles, including fonts.downloadable font: download failed
… CSS error. Native image viewing program displays it fine so the path to the font (also shown in the error message) is definitely correct and exists.