JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.1.2/webfont.js"></script>
<div style="font-family: 'Arial';">Arial</div>
<div style="font-family: 'Arial'; font-style: italic;">Arial</div>
<div style="font-family: 'Arial'; font-weight: bold;">Arial</div>
<div style="font-family: 'Zapfino';">Zapfino</div>
<div style="font-family: 'Zapfino'; font-style: italic;">Zapfino</div>
<div style="font-family: 'Zapfino'; font-weight: bold;">Zapfino</div>
<div style="font-family: 'Snowburst One';">Snowburst One</div>
<div style="font-family: 'Snowburst One'; font-style: italic;">Snowburst One</div>
<div style="font-family: 'Snowburst One'; font-weight: bold;">Snowburst One</div>

JavaScript

// Google WebFont Loader
WebFontConfig = {
	google: { families: [ 'Snowburst One' ] },
	active: function() {
		console.log(detectBoldItalic(["Arial","Zapfino",'Snowburst One']));
	}
  };
  (function() {
	var wf = document.createElement('script');
	wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
		'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
	wf.type = 'text/javascript';
	wf.async = 'true';
	var s = document.getElementsByTagName('script')[0];
	s.parentNode.insertBefore(wf, s);
  })();
function detectBoldItalic(fonts) {
    // Create canvas
    var canvas = document.createElement('canvas');
    canvas.width = 1000;
    canvas.height = 30;
    var context = canvas.getContext("2d");
    var test = {}, results = {};
	// Default
	context.font = "normal 16px a base case font";
	context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20);
	var standard = canvas.toDataURL("image/png");
	context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
	// Start test
    for (var i = 0; i < fonts.length; i++) {
        var styles = ["normal", "bold", "italic"];
        test[fonts[i]] = {};
        results[fonts[i]] = {};
        for (var j = 0; j < styles.length; j++) {
            // Draw text in canvas
            context.font = styles[j] + " 16px " + fonts[i];
            context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20);
            // Convert canvas to png
            test[fonts[i]][styles[j]] = canvas.toDataURL("image/png");
            // Clear canvas
            context.setTransform(1, 0, 0, 1, 0, 0);
            context.clearRect(0, 0, canvas.width, canvas.height);
        }
		if (test[fonts[i]]["normal"] !== standard) {
			results[fonts[i]]["bold"] = test[fonts[i]]["normal"] !== test[fonts[i]]["bold"] ? true:false; // Support bold
			results[fonts[i]]["italic"] = test[fonts[i]]["normal"] !== test[fonts[i]]["italic"] ?...