JQuery: How to get assigned font to element

Question

Is it possible to retrieve the assigned font of an element in jQuery?

Let\'s say there is css:

#element
{
font-family: blahblah,Arial;
}

Answer 1

You can use Detector library to do it: http://www.lalit.org/lab/javascript-css-font-detect/

As the browser takes the first found font from the list, you should look through the list of fonts and try to check if you have this font in your system.

Here is JS/JQuery code:

$(function() {
    var detectFont = function(fonts) {
        var detective = new Detector(), i;
        for (i = 0; i < fonts.length; ++i) {
           if (detective.detect(fonts[i]) !== true) {
               continue
           }
           return fonts[i];
        }    
    }
    var fonts = $('#abcde').css('font-family');
    fonts = fonts.split(',');
    console.log(detectFont(fonts));
});

And here is live demo, I've prepared: http://jsfiddle.net/netme/pr7qb/1/

Hope, this approach will help you.