JSFiddle - React, Tailwind, and code Playground

by Jeremy Banks

HTML

<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>
<style>
@font-face {
  font-family: "My Font";
  src: local("My Font"),
       url("./#MyFontElement") format("svg"),
       url("#MyFontElement") format("svg"),
       url("./#MyFontElement"),
       url("#MyFontElement");
}
</style>
<p style="font: 3em 'My Font';">
    Alphabet
</p>