title: Cross-browser embedded font in svg image
body: <p>The title is ambiguous; let me clarify: I have an svg image which includes a text I want rendered with a custom font.</p>
  
  <p>However, there seem to be new issues that do not pop up when embedding fonts in html page. Also, some browsers (namely Firefox)  seem to treat in-page svg ("in a <code>img</code> tag") differently than when rendering the svg directly.</p>
  
  <pre><code>&lt;defs&gt;
  &lt;style&gt;
      @font-face {
          font-family: "Open Sans";
          src: local("Open Sans"),
              local("OpenSans"),
              url('https://example.com/OpenSans-Regular.eot') format('eot'),
              url('https://example.com/OpenSans-Regular.woff') format('woff'),
              url('https://example.com/OpenSans-Regular.ttf') format('truetype');
      }
      /* ...
  </code></pre>
  
  <p>As far as I know, if this was a web page it would render successfully across pretty much everywhere. However, as an svg, I can't get it to work. The current format works pretty much everywhere except in IE10 (and presumably older versions): the font sometimes loads, other time it doesn't. Literally every second refresh uses the system fallback font. Including the woff file inline as a base64 encoded file works, but that breaks it for Safari (and changing order does not fix it).</p>
  
  <p>Is there a solid way of cross browser embedded fonts in svg image? (Again, I don't mean embedding svg font in a web page, but rendering embedded font inside an svg image.)</p>