7

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.

4
  • 2
    SVG files embedded with the img tag do not inherit CSS styles, including fonts. May 26, 2015 at 19:03
  • Same here in Firefox, I get a 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. May 26, 2015 at 19:09
  • Just a shot in the dark: Have you tried to convert the font into woff and add the file to the same folder? May 26, 2015 at 19:48
  • That won't work @moose. Images must be complete in a single file. May 26, 2015 at 19:49

3 Answers 3

13

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.

1
0

Instead of incorporating/linking to a font, often you can also export the SVG using the option "Export text as curves for font independence". This is at least possible with Affinity Designer. This does make the file a bit heavier, but if you only use the font in this SVG, then of course it is much lighter overall.

Depending on the circumstance, this might be an option worth looking into.

-1

How I solved it:

Instead of using the <img> tag, I have included the .svg file content:

<?php 
  $svg_file = file_get_contents(get_template_directory_uri().'/test.svg');
  echo $svg_file;
?>

Without being encapsulated inside the tag, the included .svg can require and use the font-family.

1
  • I tried this but it didn't work at first. Only when I removed this line from the svg, it worked: @font-face { font-family:"Arial";font-variant:normal;font-style:normal;font-weight:normal;src:url("#FontID0") format(svg)} And this with a svg which is shown well when I open it directly in the browser.
    – AndreasW
    Jul 26 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.