JQuery: How to get assigned font to element

css, fonts, javascript, jquery

Solution

(function($) {
    $.fn.detectFont = function() {
        var fonts = $(this).css('font-family').split(",");
        if ( fonts.length == 1 )
            return fonts[0];

        var element = $(this);
        var detectedFont = null;
        fonts.forEach( function( font ) {
            var clone = element.clone().css({'visibility': 'hidden', 'font-family': font}).appendTo('body');
            if ( element.width() == clone.width() )
                detectedFont = font;
            clone.remove();
        });

       return detectedFont;
    }
})(jQuery);

edit: had to remove the cloned item from the dom.

Whipped this up just now, again, it still relies on element width - so your mileage may vary.

`$('#element').detectFont(); //outputs Arial`

Problem

Is it possible to retrieve the assigned font of an element in jQuery? Let's say there is css: ``` #element { font-family: blahblah,Arial; } ``` In the above example, Arial font will be assigned to #element. Is there a way to get that information via JS/JQuery? Something like: ``` $('#element').css('font-family'); ``` returns just `blahblah,Arial;`

Original source

Related problems