title: svg @font-face works in svg but not when included in a page
body: <p>I've got an svg file which includes a certain font using the <code>@font-face</code> syntax. This svg is located at <code>/logo/logo-big-web.svg</code> and the font is in <code>/font/MDN/MDN.ttf</code> on the server.</p>
  
  <p>Everything works fine when I open <code>http://www.mywebsite/logo/logo-big-web.svg</code> in a browser the font loads properly and the svg file is displayed correctly.</p>
  
  <p>However, when I try to embed the svg file in a html file, for instance in <code>index.html</code>:</p>
  
  <pre><code>&lt;img src="/logo/logo-big-web.svg" ... &gt;&lt;/img&gt;
  </code></pre>
  
  <p>When I open <code>http://www.mywebsite/index.html</code> in a browser, the font does not load properly and the svg displays an ugly default font.</p>
  
  <p>Has anyone else experienced this problem? How does one get around it?</p>
  
  <p>I know I could embed the font as svg glyphs inside the svg file, but this doesn't work in firefox and adds a lot to the filesize of the svg while I'm loading the font anyways for use on the webpage itself (it seems wasteful to load the font twice). So embedding the glyphs is no option. Same goes for embedded <code>data:</code> uri.</p>
  
  <h2>Update:</h2>
  
  <p>The font is specified in the svg file as:</p>
  
  <pre><code>&lt;defs&gt;
      &lt;style&gt;
          @font-face {
              font-family: MDN;
              src: url("/font/MDN/MDN.ttf"); }
      &lt;/style&gt;
  &lt;/defs&gt;
  </code></pre>
  
  <p>and I use it as follows:</p>
  
  <pre><code>&lt;text font-family="MDN" font-size="11"&gt; &lt;textPath ... &gt; ... &lt;/textPath&gt; &lt;/text&gt;
  </code></pre>
  
  <h2>Update 2:</h2>
  
  <p>I tried to circumvent the problem by defining the font in a separate stylesheet, and include it like this:</p>
  
  <pre><code>&lt;?xml-stylesheet type="text/css" href="/style/slyle.css" ?&gt;
  </code></pre>
  
  <p>But this seems to have the same problem: It works when I open the svg directly in a browser
  (<code>http://www.mywebsite/logo/logo-big-web.svg</code>) but breaks down when I use the svg in a html <code>img</code> tag or as a background to a html element.</p>