JSFiddle - React, Tailwind, and code Playground

by Jeremy Banks

HTML

<h1>Referring an SVG font embedded in the current document from @face-face</h1>

<p>

<svg style="display: none;"><defs>
  <font id="MyFontElement">
    <font-face font-family="MyFont" />
    <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" />    
  </font>
</defs></svg>

<defs>
    <font id="TestFontId">
        <font-face font-family="TestFont" />
        <glyph unicode="e" horiz-adv-x="934" d="M 993,0 L 68,0 68,161 704,0 C 634,901 300,896 520,296 L 125,896 125,1067 964,1067 964,934 389,256 305,156 C 383,166 455,171 523,171 L 500,171 993,993 Z"/>
    </font></defs>
</svg>
<p style="font-family: MyFont;">
    Alphabet
</p>

CSS

@font-face {
  font-family: Test;
  src: url("./#TestFontId"), url("#TestFontId"), local("TestFont");
}

p {
    font-size: 3em;
}