JSFiddle - React, Tailwind, and code Playground

by saeedneamati

HTML

<b id='first' style='font-family: Tahoma, Helvetica;'>Frist</b>
<b id='second' style='font-family: Helvetica, Calibri;'>Second</b>

JavaScript

(function($) {
    $.fn.fontName = function() {
        var element = this;
        if (!element.attr) {
            element = $(element);
        }
        var Font = {
            isInstalled: function(name) {
                name = name.replace(/['"<>]/g, '');
                var body = document.body;
                var test = document.createElement('div');
                var installed = false;
                var testString = 'abcdefghijklmnopqrstuvwxyz';
                var template = '<b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',sans-serif !important">ii</b><b style="display:inline !important; width:auto !important; font:normal 10px/1 \'X\',monospace !important">ii</b>';
                var ab;

                if (name) {
                    test.innerHTML = template.replace(/X/g, name);
                    test.style.cssText = 'position: absolute; visibility: hidden; display: block !important';
                    body.insertBefore(test, body.firstChild);
                    ab = test.getElementsByTagName('b');
                    installed = ab[0].offsetWidth === ab[1].offsetWidth;
                    body.removeChild(test);
                }
                return installed;
            }
        }
        var fontString = element.css('font-family');
        var fonts = fontString.split(",");
        for (var f in fonts) {
            if (Font.isInstalled(fonts[f])) {
                return fonts[f];
            }
        }
    }
})(jQuery);
$(function() {
    alert($('#second').fontName());
    alert($('#first').fontName());

});