Test fonts in svg

by jorgeluis

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200" viewBox="0 0 300 200">
  <defs>
    <style type="text/css">
      text {
        display: block;
        font-size: 2em;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
      }
    </style>
  </defs>
  <title>test</title>
  <text transform="translate(0 30)">Test font family</text>
</svg>

<p>
Testing system default fonts in svg
</p>
<p>
Why do we have to translate it down with css?
</p>