JavaScript/CSS Font Detector by Lalit Patel
// loading on "load" may cause FOUC | |
window.onload = function() { | |
var detective = new Detector(); | |
if (!detective.detect('Meat')) { | |
var url = 'link/to/style.css' | |
if (document.createStyleSheet) { | |
try { document.createStyleSheet(url); } catch (e) { } | |
} else { | |
var css; | |
css = document.createElement('link'); | |
css.rel = 'stylesheet'; | |
css.type = 'text/css'; | |
css.media = "all"; | |
css.href = url; | |
document.getElementsByTagName("head")[0].appendChild(css); | |
} | |
} | |
}; |
/** | |
* JavaScript code to detect available availability of a | |
* particular font in a browser using JavaScript and CSS. | |
* | |
* Author : Lalit Patel | |
* Website: http://www.lalit.org/lab/javascript-css-font-detect/ | |
* License: Apache Software License 2.0 | |
* http://www.apache.org/licenses/LICENSE-2.0 | |
* Version: 0.15 (21 Sep 2009) | |
* Changed comparision font to default from sans-default-default, | |
* as in FF3.0 font of child element didn't fallback | |
* to parent element if the font is missing. | |
* Version: 0.2 (04 Mar 2012) | |
* Comparing font against all the 3 generic font families ie, | |
* 'monospace', 'sans-serif' and 'sans'. If it doesn't match all 3 | |
* then that font is 100% not available in the system | |
* Version: 0.3 (24 Mar 2012) | |
* Replaced sans with serif in the list of baseFonts | |
*/ | |
/** | |
* Usage: d = new Detector(); | |
* d.detect('font name'); | |
*/ | |
var Detector = function() { | |
// a font will be compared against all the three default fonts. | |
// and if it doesn't match all 3 then that font is not available. | |
var baseFonts = ['monospace', 'sans-serif', 'serif']; | |
//we use m or w because these two characters take up the maximum width. | |
// And we use a LLi so that the same matching fonts can get separated | |
var testString = "mmmmmmmmmmlli"; | |
//we test using 72px font size, we may use any size. I guess larger the better. | |
var testSize = '72px'; | |
var h = document.getElementsByTagName("body")[0]; | |
// create a SPAN in the document to get the width of the text we use to test | |
var s = document.createElement("span"); | |
s.style.fontSize = testSize; | |
s.innerHTML = testString; | |
var defaultWidth = {}; | |
var defaultHeight = {}; | |
for (var index in baseFonts) { | |
//get the default width for the three base fonts | |
s.style.fontFamily = baseFonts[index]; | |
h.appendChild(s); | |
defaultWidth[baseFonts[index]] = s.offsetWidth; //width for the default font | |
defaultHeight[baseFonts[index]] = s.offsetHeight; //height for the defualt font | |
h.removeChild(s); | |
} | |
function detect(font) { | |
var detected = false; | |
for (var index in baseFonts) { | |
s.style.fontFamily = font + ',' + baseFonts[index]; // name of the font along with the base font for fallback. | |
h.appendChild(s); | |
var matched = (s.offsetWidth != defaultWidth[baseFonts[index]] || s.offsetHeight != defaultHeight[baseFonts[index]]); | |
h.removeChild(s); | |
detected = detected || matched; | |
} | |
return detected; | |
} | |
this.detect = detect; | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment