MooTools FontChecker Plugin
There's a very interesting piece of code on Google Code called FontAvailable which does a jQuery-based JavaScript check on a string to check whether or not your system has a specific font based upon its output width. I've ported this functionality to MooTools.
The MooTools JavaScript
var FontChecker = new Class({
/* implements */
Implements: [Options],
/* options */
options: {
fakeFont: '__RUBBUSH_FONT__',
testString: 'abcdefghijklmnopqrstuvwxyz'
},
/* initialization */
initialize: function(options) {
//set options
this.setOptions(options);
},
/* a method that does whatever you want */
check: function(desiredFont) {
/* create a hidden element */
var element = new Element('span',{
styles: {
visibility: 'hidden',
'font-family': this.options.fakeFont
},
html: this.options.testString
}).inject(document.body);
/* apply a fake font, get width */
var width = element.getCoordinates().width;
/* apply desired font */
element.setStyle('font-family', desiredFont);
var new_width = element.getCoordinates().width;
/* take our temp element out of the DOM */
element.dispose();
/* compare widths to see check if font is available */
return (width !== new_width);
}
});
My code follows the same logic as FontAvailable:
- inject a hidden inline element with some garbage text and a fake font
- record the calculated width of the element
- set the element's font to the desired font
- compare the widths and return whether they are the same
The Usage
/* when the dom is ready */
window.addEvent('domready',function() {
var fc = new FontChecker();
/* use it...or lose it? */
$('start').addEvent('click',function() {
$$('#font-list li').each(function(el) {
el.setStyle('color', fc.check(el.get('text')) ? 'green' : 'red');
});
});
});
You may check as many fonts as you'd like using one instance by using the check() method.
The accuracy of this type of check can never be 100% because two fonts could theoretically have the same calculated width. This methods does, however, provide a fairly accurate result.
Wow, I don’t have Arial? :P And ya, line 4 and 5 should be swapped.
Interesting ! This could help, thanks.
@Lim Chee Aun: Good call on the 4/5 swap.
Nice one, though I can’t think of any practical uses right now…
Still, fun stuff.
@Koen De Groote
I actually disagree. This plugin is super useful when you want to allow alternative font selections for your website, lets say you want the primary font to be A, but if the font is now allowed use B or C etc… with a simple manipulation of the code, you can get it done by loading different stylesheets that call the font family
I wonder if that made any sense, I’m too tired to type :)
@digit you dont need javascript to do that
font-family: arial, “lucida console”, sans-serif
@Jesus: You’re right, but this is all I could think of heh
Very cool. Thanks for posting this.
Internet Explorer and Opera showed different results than FF & Chrome. Any ideas as to why?
@Alan
This script does not give 100% true results.
It is just tries to see if the default font gives a text with different width than the new font you want to see the user haves on his computer.
If both font have same width with the testString, wich is not that hard, the script will give false results.
I don´t see any other way to test this dou…. In fact this is new for me.
Congratulations DW and the guy who created it for the first time.
Meh, I must agree with Jesus DeLaTorre on this one: while this is a cool trick, I don’t really see any use for it, since font selection is already handled by one line CSS. Unless you want to display a message that say “this site would look cooler if you had the font …” then what?
@olivier: This is more proof of concept than anything else. For each computer I tested this on, it returned the correct result.
No use? Why are you all talking about no use?
You can make excellent use of it! You use this to check if you want need a font-replacer like Cufon at all, by first checking if the browser is able to render the font-itself (either since it was pre-installed, or maybe since css @font-face works in this browser).
Refer to the excellent article http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/
The real world use for this would be as follows:
Detect if client supports font A (heavy, condensed).
If not, detect if client supports font B (condensed).
If true, adjust font weight to heavy.
AFAIK, you cannot cascade weight, size etc, only font family.
Hi David,
I’m trying to find something that would allow users of a website to type some characters into a field and then choose from a list of available fonts and see what their text looks like in that font.
Is there anyway your code could be modified to help do this? If not any idea what I could use for this?
I’m not a developer but a graphic designer who puts together websites using Joomla. I can usually figure things out if pointed in the right direction so any help would be much appreciated.
Cheers
Jon