SVG image external fonts not loading when in tag, but fine inline or alone

Question

I have an svg image which I'm loading using an img tag. When I view the htmo page, the image renders, but the external fonts do not load.

However, if I right-click > "open image in new tab", then the image displays properly in the new tab. This is happening on my web server. I made a plunk to see if I could debug something else weird in my website code. I was very surprised to see the same problem.

http://plnkr.co/edit/8Gl0iX9Iv5tEl5SB0qle?p=preview

It does seem that when I embed the svg inline in the HTML file it does render properly.

These give clues to the problem:

https://stackoverflow.com/a/29274699/188963

https://stackoverflow.com/a/15407892/188963

But since I'm importing the fonts directly into the SVG file, I would think the data encoding thing wouldn't be an obstacle.

Is there no workaround other than having a huge binary string in my html file?

Note: I'm using a templating engine (handlebars), so I might just template in the SVG code inline in the html...if that works.

Note 2: I tried encoding the data, and that didn't work either.

Note 3: I also tried inserting the SVG inline using jquery:

$.get('img/logo.svg',
  function(data, status)
  {
    //alert("Data: " + data + "\nStatus: " + status);
    //console.log(data);
    $('#logo').text(data);
  }, 
  'xml'
);

which did not work either. I get [object XMLDocument] displayed on the page.

Note 3: @ccprog, here is an screenshot of me viewing the plunk in Firefox. I'm running 55.0.3 (64-bit). Which version are you running?

HTML:

<!DOCTYPE html>
<html>

  <body>
    <!-- Header -->
    <header id="logo" class="masthead">
      <img src="logo.svg" onerror="this.onerror=null; this.src='image.png'">
    </header>
  </body>

</html>

logo.svg

<!--  width="664" height="165" -->

<svg 
  xmlns="http://www.w3.org/2000/svg"
  id="logo-svg"
  viewBox="0 0 664 165"
  >

  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Bitter');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
    </style>
    <style> 

      :root {
      --graphics: #670309;
      --logo-text: #000;
      --services: #fff;
      --features: #914E1B;
      --logo-font: "Roboto Slab";
      }
      .house{
        fill: none;
        stroke: var(--graphics);
      }
      .bottom{
        fill: var(--graphics);
        stroke: var(--graphics);
      }
      .logo{
        fill: var(--logo-text);
        stroke: none;
        font-family: var(--logo-font);
        font-weight: 500;
      }
      .features{
        fill: var(--features);
        stroke: none;
      }
      .services{
        fill: var(--services);
        stroke: none;
      }
    </style>
  </defs>

  <!--  ROOF  -->
  <path d="M 50 100 L 140 50 L 230 100" 
    stroke-width = "15"
    stroke-linecap = "butt"
    stroke-linejoin = "miter"
    class = "house"
    />

  <!--  CHIMNEY  -->
  <path d="M 200 60 L 200 80" 
    stroke-width = "15"
    stroke-linecap = "butt"
    class = "house"
    />

  <!--  LEFT WALL -->
  <path d="M 70 90 L 70 150" 
    stroke-width = "12"
    stroke-linecap = "butt"
    stroke-linejoin = "miter"
    class = "house"
    />

  <!--  LEFT WALL -->
  <path d="M 210 90 L 210 150" 
    stroke-width = "12"
    stroke-linecap = "butt"
    stroke-linejoin = "miter"
    class = "house"
    />
  <!--  BOTTOM BAR AND TEXT -->
  <g transform="translate(64,140)">
    <svg width="600" height="25">
      <rect x="0" y="0" 
        width="600" 
        height="25"
        class="bottom"
        />
      <text x="50%" y="65%" 
        alignment-baseline="middle" 
        text-anchor="middle" 
        font-size="76%"
        font-weight="500"
        font-family="Roboto Condensed"
        letter-spacing="0.07em"
        class="services"
      >
        <tspan class="service">residential</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">commercial</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">buyer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">seller</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">warranty</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">expert-witness</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">sewer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">radon</tspan>
      </text>    
    </svg>  
  </g>


  <!--  HOUSE DETECTIVES LLC  -->
  <g transform="translate(280,35)">
    <text x="-50px" y="-10px"
      alignment-baseline="middle" 
      text-anchor="left"  
      font-size="30px" 
      transform="rotate(-90)"
      class="logo"
      >the</text>
    <text x="0" y="0" 
      alignment-baseline="middle" 
      text-anchor="left"  
      font-size="64px" 
      class="logo"
      >
        <tspan class="name" x="0" dy="50px">House</tspan>
        <tspan class="name" x="0" dy="50px">Detectives</tspan>
        <tspan class="name" dx="-10px" dy="0" font-size="24px">llc</tspan>
    </text>  
  </g>

  <!--  DOOR  -->
  <rect x="105" y="95" height="45" style="stroke-width:0.5; stroke:var(--features)" width="25" class="features"></rect>

  <!--  SINGLE WINDOW DEFINITION -->
  <defs>
    <rect id="window" x="0" y="0" width="10" height="10" class="features"></rect>
  </defs>

  <!--  WINDOWS  -->
  <g transform="translate(150,95)">
    <use href="#window" transform="translate(0 0)"/>
    <use href="#window" transform="translate(0 12)"/>
    <use href="#window" transform="translate(12 0)"/>
    <use href="#window" transform="translate(12 12)"/>
  </g>


</svg>

<!DOCTYPE html>
<html>

  <body>
    <!-- Header -->
    <header id="logo" class="masthead">
    
    <!--  width="664" height="165" -->

      <svg 
        xmlns="http://www.w3.org/2000/svg"
        id="logo-svg"
        viewBox="0 0 664 165"
        >

        <defs>
          <style type="text/css">
            @import url('https://fonts.googleapis.com/css?family=Bitter');
            @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
            @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
          </style>
          <style> 

            :root {
            --graphics: #670309;
            --logo-text: #000;
            --services: #fff;
            --features: #914E1B;
            --logo-font: "Roboto Slab";
            }
            .house{
              fill: none;
              stroke: var(--graphics);
            }
            .bottom{
              fill: var(--graphics);
              stroke: var(--graphics);
            }
            .logo{
              fill: var(--logo-text);
              stroke: none;
              font-family: var(--logo-font);
              font-weight: 500;
            }
            .features{
              fill: var(--features);
              stroke: none;
            }
            .services{
              fill: var(--services);
              stroke: none;
            }
          </style>
        </defs>

        <!--  ROOF  -->
        <path d="M 50 100 L 140 50 L 230 100" 
          stroke-width = "15"
          stroke-linecap = "butt"
          stroke-linejoin = "miter"
          class = "house"
          />

        <!--  CHIMNEY  -->
        <path d="M 200 60 L 200 80" 
          stroke-width = "15"
          stroke-linecap = "butt"
          class = "house"
          />

        <!--  LEFT WALL -->
        <path d="M 70 90 L 70 150" 
          stroke-width = "12"
          stroke-linecap = "butt"
          stroke-linejoin = "miter"
          class = "house"
          />

        <!--  LEFT WALL -->
        <path d="M 210 90 L 210 150" 
          stroke-width = "12"
          stroke-linecap = "butt"
          stroke-linejoin = "miter"
          class = "house"
          />
        <!--  BOTTOM BAR AND TEXT -->
        <g transform="translate(64,140)">
          <svg width="600" height="25">
            <rect x="0" y="0" 
              width="600" 
              height="25"
              class="bottom"
              />
            <text x="50%" y="65%" 
              alignment-baseline="middle" 
              text-anchor="middle" 
              font-size="76%"
              font-weight="500"
              font-family="Roboto Condensed"
              letter-spacing="0.07em"
              class="services"
            >
              <tspan class="service">residential</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">commercial</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">buyer</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">seller</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">warranty</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">expert-witness</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">sewer</tspan>
              <tspan class="separator" dx="5px">&#9632;</tspan>
              <tspan class="service" dx="5px">radon</tspan>
            </text>    
          </svg>  
        </g>


        <!--  HOUSE DETECTIVES LLC  -->
        <g transform="translate(280,35)">
          <text x="-50px" y="-10px"
            alignment-baseline="middle" 
            text-anchor="left"  
            font-size="30px" 
            transform="rotate(-90)"
            class="logo"
            >the</text>
          <text x="0" y="0" 
            alignment-baseline="middle" 
            text-anchor="left"  
            font-size="64px" 
            class="logo"
            >
              <tspan class="name" x="0" dy="50px">House</tspan>
              <tspan class="name" x="0" dy="50px">Detectives</tspan>
              <tspan class="name" dx="-10px" dy="0" font-size="24px">llc</tspan>
          </text>  
        </g>

        <!--  DOOR  -->
        <rect x="105" y="95" height="45" style="stroke-width:0.5; stroke:var(--features)" width="25" class="features"></rect>

        <!--  SINGLE WINDOW DEFINITION -->
        <defs>
          <rect id="window" x="0" y="0" width="10" height="10" class="features"></rect>
        </defs>

        <!--  WINDOWS  -->
        <g transform="translate(150,95)">
          <use href="#window" transform="translate(0 0)"/>
          <use href="#window" transform="translate(0 12)"/>
          <use href="#window" transform="translate(12 0)"/>
          <use href="#window" transform="translate(12 12)"/>
        </g>


      </svg>
    
    </header>
  </body>

</html>

I can only confirm your finding for Chrome. In Firefox, the font is loaded correctly. — ccprog, Sep 19 '17 at 21:59
@ccprog I added a screenshot of what I see in Firefox. I noted which version I'm using. Which are you? — abalter, Sep 20 '17 at 02:03
You **are not** embedding the fonts in your svg file. You are declaring that the resources should be imported but this can not be done inside an `` frame, since `` content is not allowed to load any external resources. For a workaround, here is one: https://stackoverflow.com/questions/42402584/how-to-use-google-fonts-in-canvas-when-drawing-dom-objects-in-svg/42405731#42405731 though I'm not sure if it would be a better dupe target than the links you already provided. Let me know if you think it is. — Kaiido, Sep 20 '17 at 02:41
@abalter, You are right, I see a substitute font. Interestingly, Roboto Slab is exchanged for another locally installed font (Bitstream Vera Serif) that is almost undistinguishable. I have no idea where this substitution comes from, the OS font substitution normally would choose another one. — ccprog, Sep 20 '17 at 14:32
@Kaiido I see your point. I tried to upvote your comment, but mouse glitched, and unvoted it, and now SO won't let me revote it. Whatever. — abalter, Sep 21 '17 at 05:17
Yes Robert has marked it as dupe anyway, if the answer there helps you, feel free to vote it up it along with the question. And if the answer I pointed you to did help, do the same ;-) — Kaiido, Sep 21 '17 at 05:20
I found a solution with javascript, fetching the data and inserting it inline. I plan to post it. I also want to see if I can load the fonts in the html and have them available in the svg. — abalter, Sep 21 '17 at 05:23

SVG image external fonts not loading when in tag, but fine inline or alone

0 Answers0