Font issue from SVG file

Ask the community
1

I have found two issues when I import an SVG file into Figma.

  1. Not font-family detection at all.
    I’ve tested when it arrive. When a font name with multiple word in svg code, it’s name inside " " (ex: Bebas neue), then it’s not work. And when the font name is just a single word, then its name does not contain “” inside the svg code. and that time it worked perfectly. For example below code contain 3 font family. Here just Imtroy working, the other two font Bebas neue & Time new roman not working.

  2. Always open a paragraph on a single line. Though, it’s inside code contain multple line. For example: Bellow code Time new roman word in two line. But figma showing in single line.

If those are my issues, can anyone help me solve them, please?
It’s very important to me. Thanks in advance.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="338" viewBox="0 0 500 338">
  <defs>
    <style>
      .cls-1, .cls-3 {
        font-size: 66.667px;
      }

      .cls-1 {
        fill: red;
        font-family: "Bebas Neue";
      }

      .cls-1, .cls-2, .cls-3 {
        text-anchor: middle;
      }

      .cls-2 {
        font-size: 72.222px;
        fill: #ff7800;
        font-family: Imstory;
      }

      .cls-3 {
        fill: #00aeff;
        font-family: "Times New Roman";
      }
    </style>
  </defs>
  <image id="Background" width="500" height="338" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAFSCAYAAAAEky15AAAFZ0lEQVR4nO3VQRHAMAzAsGz8Oac44pMo+OFvd3cAgNN++QDgPkMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweAAEMHgABDB4AAQweA62bmAS+sBqAdKalMAAAAAElFTkSuQmCC"/>
  <text id="bebas_neue-Regular" data-name="bebas neue-Regular" class="cls-1" x="254" y="187"><tspan x="254">bebas neue-Regular</tspan></text>
  <text id="Imtroy-Regular" class="cls-2" x="247.146" y="93"><tspan x="247.146">Imtroy-Regular</tspan></text>
  <text id="Time_New_Roman" data-name="Time New Roman" class="cls-3" x="250" y="249"><tspan x="250">Time New</tspan><tspan x="250" dy="80"> Roman</tspan></text>
</svg>
2
  1. Enclose the font name with apostrophes (').
font-family: 'Times New Roman'
  1. Insert a Line Feed character (&#10).
<tspan x="250">Time New&#10</tspan><tspan x="250" dy="80">Roman</tspan>