CODEWITHSUNDEEP
javascriptjquerycssfonts
el vis
el vis

Reputation: 1302

JQuery: How to get assigned font to element

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;

Upvotes: 9

Views: 17769

Answers (4)

bucabay
bucabay

Reputation: 5295

Modified kmfk's answer so that it works for all elements. Block elements have fixed or dynamic width won't work so this uses inline elements:

/**
 * Detects the font of an element from the font-family css attribute by comparing the font widths on the element
 * @link http://stackoverflow.com/questions/15664759/jquery-how-to-get-assigned-font-to-element
 */
(function($) {
    $.fn.detectFont = function() {
        var fontfamily = $(this).css('font-family');
        var fonts = fontfamily.split(',');
        if ( fonts.length == 1 )
            return fonts[0];

        var element = $(this);
        var detectedFont = null;
        fonts.forEach( function( font ) {
            var clone = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': fontfamily, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body');
            var dummy = $('<span>wwwwwwwwwwwwwwwlllllllliiiiii</span>').css({'font-family': font, 'font-size':'70px', 'display':'inline', 'visibility':'hidden'}).appendTo('body');
            //console.log(clone, dummy, fonts, font, clone.width(), dummy.width());
            if ( clone.width() == dummy.width() )
                detectedFont = font;
            clone.remove();
            dummy.remove();
        });

       return detectedFont;
    }
})(jQuery);

Upvotes: 2

Hassaan
Hassaan

Reputation: 326

$('#element').css("font-family", "Arial");

Try this.

Upvotes: -5

kmfk
kmfk

Reputation: 3951

(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

Upvotes: 11

Mikhail Chernykh
Mikhail Chernykh

Reputation: 2697

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.

Upvotes: 3

Related Questions