title: Using @font-face with an SVG font embedded in the current HTML page
body: <p>I have a standalone HTML document I want to distribute, without any external dependencies. I'm using a non-standard font in this document that only some of my users will have installed.</p>
  
  <p>For those users that do not have the font installed, I am including a copy of the font in an embedded SVG document at the top of the <code>&lt;body&gt;</code>. (I'm using a one-glyph font for this example, the real document is using a complete font.)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;svg style="display: none;"&gt;&lt;defs&gt;
    &lt;font id="MyFontElement"&gt;
      &lt;font-face font-family="MyFont" /&gt;
      &lt;glyph unicode="A" horiz-adv-x="950" d="M0,0L0,100L100,100L100,200L0,200L0,300L100,300L100,400L200,400L200,500L300,500L300,600L400,600L600,600L600,500L700,500L700,400L800,400L800,300L900,300L900,200L800,200L800,100L900,100L900,0L600,0L600,100L700,100L700,200L800,200L800,300L100,300L100,200L200,200L200,100L300,100L300,0L0,0M300,400L600,400L600,500L300,500L300,400Z" /&gt;    
    &lt;/font&gt;
  &lt;/defs&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>SVG fonts do not look as nice as ordinary fonts, so I only want the SVG font to be used if the font is not installed locally. If the font was defined in an external SVG document, I could use it at a lower priority than the locally-installed font like this: (<a href="http://jsfiddle.net/jeremy/HANsP/" rel="noreferrer">fiddle</a>)</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;style&gt;
    @font-face {
      font-family: "My Font";
      src: local("My Font"), url("fonts.svg#MyFontElement") format("svg");
    }
  &lt;/style&gt;
  &lt;p style="font: 3em 'My Font';"&gt;
      Alphabet
  &lt;/p&gt;
  </code></pre>
  
  <blockquote>
    <p><img src="https://i.stack.imgur.com/9ajBS.png" alt="screenshot"></p>
  </blockquote>
  
  <p>Unfortunately, none of the obvious variations seem to work for a font in the current document: (<a href="http://jsfiddle.net/jeremy/xX6Bv/" rel="noreferrer">fiddle</a>)</p>
  
  <pre class="lang-css prettyprint-override"><code>  src: local("My Font"),
         url("./#MyFontElement") format("svg"),
         url("./#MyFontElement"),
         url("#MyFontElement") format("svg"),
         url("#MyFontElement");
  </code></pre>
  
  <p>Even without a <code>@font-face</code> declaration, the font is already available in the document as <code>MyFont</code>, the <code>font-family</code> specified in the <code>&lt;font-face /&gt;</code>. However, this will be used at a <em>higher</em> priority than a native font named <code>MyFont</code>, so it is not an solution.</p>
  
  <p>I hoped that I might be able to refer to it as <code>local("MyFont")</code>... (<a href="http://jsfiddle.net/jeremy/X78SN/" rel="noreferrer">fiddle</a>)</p>
  
  <pre class="lang-css prettyprint-override"><code>  src: local("My Font"), /* local */
         local("MyFont"); /* embedded */
  </code></pre>
  
  <p>...but that doesn't work either.</p>
  
  <p>I could give the embedded font a different name and use it at a lower priority, <code>style="font-family: LocalFont, EmbeddedFont"</code>, but I'm allowing users to import snippets from local files into the document and those local files will refer to the font only by the standard name. It would be possible to rewrite these references when they're imported, but I don't like that solution.</p>
  
  <p>How do I refer to an SVG font embedded in the current document from a <code>@font-face</code> declaration?</p>