function checkFont(strFamily) {
var objDiv = document.createElement('div');
objDiv.style.fontFamily = strFamily;
objDiv.appendChild(document.createTextNode('FONT TEST'));
if (window.getComputedStyle) {
return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily;
}
return objDiv.currentStyle.fontFamily === strFamily;
}
Usage
var iconFontHonored = checkFont('icomoon');
Neat! Useful, thanks :)
This is 100% incorrect. The value of
window.getComputedStyle(objDiv, null).getPropertyValue('font-family')
will always be what you declared.Here: http://codepen.io/anon/pen/HIKDq
Chrome reports all are missing, Firefox reports all available.
Perhaps see what the author has to say? http://juicystudio.com/article/icon-fonts-user-defined-stylesheets.php
I left a comment there. In case anyone is looking for a solution, this seems like a working option: http://www.lalit.org/lab/javascript-css-font-detect/
Yes, this code is busted.
If the topic is validating available fonts I’m not getting how this will help. What I need, and what I think most designers need, is a script that will tell me which of the fonts in the font stack appears when the page appears on each browser and OS.
Try using: https://github.com/Wildhoney/DetectFont
Unfortunately this won’t work at all – in Firefox it will always return true and in Chrome it will always return false.