JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Since fonts loaded by @font-face CSS rules are exempted from Tor Browser's font per document limit, we can load unlimited number of local fonts via src/local value of font-face rules. e.g.</p>
<pre>@font-face { font-family: MyArial;  src: local("Arial");}</pre>

    </li>
    <li>Fonts (font-face ones) that are not installed locally (e.g. Font1-5 in the following code) may be requested from the src/url of the font-face rule. This is effectively saying <i>user does not have this font</i> to server. e.g.
<pre>@font-face { font-family: Font1;  src: local("Font1"), url("Font1NotFound.ttf");}</pre>
    </li>
    <li>Note that one font-face rule can be used to report the status(not-found) of more than one font by chaining font-face local() properties. e.g. <pre>@font-face { font-family: Font3;  src: local("Font3"), local("Font4"), local("Font5"), url("Font-3-4-5-NotFound.ttf");}</pre>
    </li>
    <li>Instead of reporting non-existent fonts one could possibly use CSS/JS based width-height detection ('flippingtypical') to enumerate system fonts.</li>
</ul>
<p>Tested on Tor Browser Bundle for GNU/Linux 2.3.25-5 on Ubuntu 12.04</p>
<ul id='fonts'>
    <li style="font-family:Font1">Font1 (*)</li>
    <li style="font-family:Font2">Font2 (*)</li>
    <li style="font-family:Font3">Font3 (*)</li>
    <li style="font-family:MyAndale Mono">Andale Mono</li>
    <li style="font-family:MyArial">Arial</li>
    <li style="font-family:MyArial Black">Arial Black</li>
    <li style="font-family:MyBitstream Charter">Bitstream Charter</li>
    <li style="font-family:MyCentury Schoolbook L">Century Schoolbook L</li>
    <li style="font-family:MyComic Sans MS">Comic Sans MS</li>
    <li style="font-family:MyCourier 10 Pitch">Courier 10 Pitch</li>
    <li style="font-family:MyCourier New">Courier New</li>
    <li style="font-family:MyDejaVu Sans">DejaVu Sans</li>
    <li style="font-family:MyDejaVu Sans Condensed">DejaVu Sans Condensed</li>
    <li style="font-family:MyDejaVu...

CSS

#fonts li {
    font-size: 24px;
}
@font-face {
    font-family: Font1;
    src: local("Font1"), url("Font1NotFound.ttf");
}
@font-face {
    font-family: Font2;
    src: local("Font2"), url("Font2NotFound.ttf");
}
@font-face {
    font-family: Font3;
    src: local("Font3"), local("Font4"), local("Font5"), url("Font-3-4-5-NotFound.ttf");
}
@font-face {
    font-family: MyAndale Mono;
    src: local("Andale Mono");
}
/*If Arial is installed locally we shouldn't be seeing a request to Arial-NotFound.ttf*/
 @font-face {
    font-family: MyArial;
    src: local("Arial"), url("Arial-NotFound.ttf");
}
@font-face {
    font-family: MyArial Black;
    src: local("Arial Black");
}
@font-face {
    font-family: MyBitstream Charter;
    src: local("Bitstream Charter");
}
@font-face {
    font-family: MyCentury Schoolbook L;
    src: local("Century Schoolbook L");
}
@font-face {
    font-family: MyComic Sans MS;
    src: local("Comic Sans MS");
}
@font-face {
    font-family: MyCourier 10 Pitch;
    src: local("Courier 10 Pitch");
}
@font-face {
    font-family: MyCourier New;
    src: local("Courier New");
}
@font-face {
    font-family: MyDejaVu Sans;
    src: local("DejaVu Sans");
}
@font-face {
    font-family: MyDejaVu Sans Condensed;
    src: local("DejaVu Sans Condensed");
}
@font-face {
    font-family: MyDejaVu Sans Light;
    src: local("DejaVu Sans Light");
}
@font-face {
    font-family: MyDejaVu Sans Mono;
    src: local("DejaVu Sans Mono");
}
@font-face {
    font-family: MyDejaVu Serif;
    src: local("DejaVu Serif");
}
@font-face {
    font-family: MyDejaVu Serif Condensed;
    src: local("DejaVu Serif Condensed");
}
@font-face {
    font-family: MyDingbats;
    src: local("Dingbats");
}
@font-face {
    font-family: MyDroid Sans;
    src: local("Droid Sans");
}
@font-face {
    font-family: MyDroid Sans Mono;
    src: local("Droid Sans Mono");
}
@font-face {
    font-family: MyDroid Serif;
    src: local("Droid Serif");
}
@font-face {
    font-family:...