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;
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.