JSFiddle - React, Tailwind, and code Playground

by allcaps

HTML

<!-- YEAH scenario -->
<!-- In the YEAH scenario everything works! -->
<p class="yeah">twitter</p>

<!-- FAIL NO FONT scenario -->
<!-- The font file doesn't load because the file isn't where you say it is. -->
<p class="fail_no_font">twitter</p>

CSS

* { margin: 0; }
body { margin: 12px; }

/* YEAH scenario */
@font-face {
    font-family: 'LigatureSymbols';
    src: url('http://kudakurage.com/ligature_symbols/LigatureSymbols-2.11.eot');
    src: url('http://kudakurage.com/ligature_symbols/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('http://kudakurage.com/ligature_symbols/LigatureSymbols-2.11.woff') format('woff'),
         url('http://kudakurage.com/ligature_symbols/LigatureSymbols-2.11.ttf') format('truetype'),
         url('http://kudakurage.com/ligature_symbols/LigatureSymbols-2.11.svg#LigatureSymbols') format('svg');
    src: url('http://kudakurage.com/ligature_symbols/LigatureSymbols-2.11.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.yeah {
    font-family: 'LigatureSymbols' monospace !important;
    font-size: 600%;
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    -ms-text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -ms-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -webkit-font-feature-settings: "liga" 1, "dlig" 1;
    -moz-font-feature-settings: "liga=1, dlig=1";
    -ms-font-feature-settings: "liga" 1, "dlig" 1;
    -o-font-feature-settings: "liga" 1, "dlig" 1;
    font-feature-settings: "liga" 1, "dlig" 1;
}
/* End YEAH scenario */

/* FAIL NO FONT scenario */
@font-face {
    font-family: 'LigatureSymbols_1';
    src: url('there/is/no/font/here/LigatureSymbols-2.11.eot');
    src: url('there/is/no/font/here/LigatureSymbols-2.11.eot?#iefix') format('embedded-opentype'),
         url('there/is/no/font/here/LigatureSymbols-2.11.woff') format('woff'),
         url('there/is/no/font/here/LigatureSymbols-2.11.ttf') format('truetype'),
        ...