JSFiddle - React, Tailwind, and code Playground

HTML

<svg style="display: none;"><defs>
  <font id="MyFontElement">
    <font-face font-family="MyEmbeddedFont" />
    <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>
<p class="fakeLocalFont">AFakeFont. A font you don't have installed on your computer. MyEmbeddedFont is used.</p>
<p class="realLocalFont">Arial.  A font you are likely to have installed on your computer. Arial is used.</p>

CSS

p {
    font-size: 2em;
}
.fakeLocalFont {
    font-family: AFakeFont, MyEmbeddedFont;
}
.realLocalFont {
    font-family: Arial, MyEmbeddedFont;
}