Skip to main content
Question

Font issue from SVG file

  • November 23, 2022
  • 1 reply
  • 1310 views

Rizwan_Ahmed

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>

1 reply

tank666
  • 4868 replies
  • November 23, 2022
  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>

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings