Louis Ramos’ Blog


Javascript/CSS detect browser fonts

Posted in Javascript/HTML/CSS by louisramos on February 14, 2009

Was looking for a script that detects the browser’s available/installed fonts and came up with this final result.

Original idea found at lalit.org

The original code I found did not work properly for my browser, it detected more fonts than actually available. I’m using Firefox 3.0.6 (Ubuntu 8.04).

This is a modified and working example that returns only the fonts that are actually available and returns adds them to a drop down / select box:

<html>
<body>

<script type=”text/javascript”>
/**
* 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: Creative Commons Attribution-ShareAlike 2.5
* http://creativecommons.org/licenses/by-sa/2.5/
* Version: 0.1
* Updated: Aug 11, 2007 10:09am
*
* Modified: Feb 14, 2009, Louis: http://blog.louisramos.com/
* Made changes to detect fonts that are actually “different” from the default.
*
*/

/**
* Actual function that does all the work. Returns an array with all the info.
* My Assumption is that most of the browsers will have arial set as their default sans-serif font.
*/
var Detector = function(){
doc = document;
var h = doc.getElementsByTagName(“BODY”)[0];
var d = doc.createElement(“DIV”);
var s = doc.createElement(“SPAN”);

d.appendChild(s);
d.style.fontFamily = “xfndkjfeief”; //font for the parent element DIV.
s.style.fontFamily = “xfndkjfeief”; //arial font used as a comparator.
s.style.fontSize = “72px”; //we test using 72px font size, we may use any size. I guess larger the better.
s.innerHTML = “mmmmmmmmmml”; //we use m or w because these two characters take up the maximum width. And we use a L so that the same matching fonts can get separated
h.appendChild(d);
var defaultWidth = s.offsetWidth; //now we have the defaultWidth
var defaultHeight = s.offsetHeight; //and the defaultHeight, we compare other fonts with these.
h.removeChild(d);

/* test
* params:
* font – name of the font you wish to detect
* return:
* f[0] – Input font name.
* f[1] – Computed width.
* f[2] – Computed height.
* f[3] – Detected? (true/false).
*/
function test(font) {
h.appendChild(d);
var f = [];
f[0] = s.style.fontFamily = font; // Name of the font
f[1] = s.offsetWidth; // Width
f[2] = s.offsetHeight; // Height
h.removeChild(d);
font = font.toLowerCase();
if (font == “arial” || font == “sans-serif”) {
f[3] = true; // to set arial and sans-serif true
} else {
f[3] = (f[1] != defaultWidth || f[2] != defaultHeight); // Detected?
}
return f;
}
this.test = test;
}

function updateFonts(result){
new_ele = doc.createElement(“OPTION”)
new_ele.innerHTML = result[0]
new_ele.value = result[0]

if (result[3]==true) {
resultFont=’goodFonts’;
} else {
resultFont=’badFonts’;
}
doc.getElementById(resultFont).appendChild(new_ele)
}

function updateTest(font) {
tA = doc.getElementById(‘testArea’)
tA.innerHTML = ‘This is how ‘+font+’ looks.’
tA.style.fontFamily = font;
}
</script>

<div>
Good Fonts: <select id=”goodFonts” onChange=”updateTest(this.value)” onKeyUp=”updateTest(this.value)”></select>
Bad Fonts: <select id=”badFonts” onChange=”updateTest(this.value)” onKeyUp=”updateTest(this.value)”></select>
</div>
<p id=”testArea”>Select a font.</p>

<script>

dtest = new Detector()
var fonts = [‘academy engraved let’, ‘algerian’, ‘amaze’, ‘arial’, ‘arial black’, ‘balthazar’, ‘bankgothic lt bt’, ‘bart’, ‘bimini’, ‘comic sans ms’, ‘book antiqua’, ‘bookman old style’, ‘braggadocio’, ‘britannic bold’, ‘brush script mt’, ‘century gothic’, ‘century schoolbook’, ‘chasm’, ‘chicago’, ‘colonna mt’, ‘comic sans ms’, ‘commercialscript bt’, ‘coolsville’, ‘courier’, ‘courier new’, ‘cursive’, ‘dayton’, ‘desdemona’, ‘fantasy’, ‘flat brush’, ‘footlight mt light’, ‘futurablack bt’, ‘futuralight bt’, ‘garamond’, ‘gaze’, ‘geneva’, ‘georgia’, ‘geotype tt’, ‘helterskelter’, ‘helvetica’, ‘herman’, ‘highlight let’, ‘impact’, ‘jester’, ‘joan’, ‘john handy let’, ‘jokerman let’, ‘kelt’, ‘kids’, ‘kino mt’, ‘la bamba let’, ‘lithograph’, ‘lucida console’, ‘map symbols’, ‘marlett’, ‘matteroffact’, ‘matisse itc’, ‘matura mt script capitals’, ‘mekanik let’, ‘monaco’, ‘monospace’, ‘monotype sorts’, ‘ms linedraw’, ‘new york’, ‘olddreadfulno7 bt’, ‘orange let’, ‘palatino’, ‘playbill’, ‘pump demi bold let’, ‘puppylike’, ‘roland’, ‘sans-serif’, ‘scripts’, ‘scruff let’, ‘serif’, ‘short hand’, ‘signs normal’, ‘simplex’, ‘simpson’, ‘stylus bt’, ‘superfrench’, ‘surfer’, ‘swis721 bt’, ‘swis721 blkoul bt’, ‘symap’, ‘symbol’, ‘tahoma’, ‘technic’, ‘tempus sans itc’, ‘terk’, ‘times’, ‘times new roman’, ‘trebuchet ms’, ‘trendy’, ‘txt’, ‘verdana’, ‘victorian let’, ‘vineta bt’, ‘vivian’, ‘webdings’, ‘wingdings’, ‘western’, ‘westminster’, ‘westwood let’, ‘wide latin’, ‘zapfellipt bt’]

for (f in fonts) {
result = dtest.test(fonts[f]);
updateFonts(result);
}

</script>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s


%d bloggers like this: