JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<!-- All fonts are 48px but still have diffrent body size. -->
<!-- Iconfont doens't have a-z, A-Z, 0-9 but does display a snowman! :/ -->
<span class="iconfont">&#xE013; a-z, A-Z, 0-9 &#x2603;</span>
<span class="arial">Hx</span> 
<span class="times">Hx</span>
<span class="helvetica">Hx</span> 
<!-- Snowman isn't an iconfont glyph. -->
&#x2603;

CSS

* { font-size: 48px; }
@font-face {
    font-family: iconfont;
    src: url('http://cheesefish.net/techchoicesymbol-webfont.ttf') format('truetype');
}
span {
    background-color: gray;
    color: white;
}
.iconfont {
    font-family: iconfont;
}
.arial {
    font-family: Arial;
}
.times {
    font-family: Times;
}
.helvetica {
    font-family: Helvetica;
}