title: Custom Font in svg
body: <p>I would like to use custom fonts in a svg embedded in a web page. With setattribute I can use Arial... fonts. I think those fonts are embedded in the browser and I can use it. But how can I do to use custom fonts? 
  In Firefox, when I use in css for exemple @font-face ....</p>
  
  <pre><code>@font-face {
  
                  font-family: "ITCGothicBold";
                  src: url('fonts/ITCGothicBold.ttf') format("truetype");
  
  }
  </code></pre>
  
  <p>that font-family works in a Html web page.</p>
  
  <p>On the other hand, for exemple, in the svg text:</p>
  
  <pre><code>&lt;text xml:space="preserve" text-anchor="middle" font-family="ITCGothicBold.ttf" font-size="24" id="svg_1" y="72.83333" x="74.75" stroke-width="0" stroke="#000000" fill="#000000"&gt;HELLO&lt;/text&gt;
  </code></pre>
  
  <p>I would like to use for exemple ITCGothicBold.ttf. Using setattribute I can put ITCGothicBold.ttf in the font_family attribute but nothing change: the HELLO text is not changing. 
  Does anyone know how to work with custom font in svg embedded in a web page? Thanks</p>
  
  <p>NOTE: The full code I have used is:</p>
  
  <pre><code>&lt;svg width="612" height="394" xmlns="http://www.w3.org/2000/svg"&gt;
      &lt;defs&gt;
    &lt;style type="text/css"&gt;@font-face {
  
                  font-family: "ITCGothicBold.ttf";
                  src: url('fonts/ITCGothicBold.ttf') format("truetype");
  
  }&lt;/style&gt;
   &lt;/defs&gt;
   &lt;g&gt;
    &lt;title&gt;Calque 1&lt;/title&gt;
    &lt;text fill="#000000" stroke="#000000" stroke-width="0" x="75.75" y="72.83333" id="svg_1" font-size="24" font-family="ITCGothicBold.ttf" text-anchor="middle" xml:space="preserve"&gt;HELLO&lt;/text&gt;
   &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>