Monday, March 12th, 2007
Javascript/CSS Font Detector
Category: JavaScript
, Library, CSS
Lalit Patel has created a nice Javascript/CSS font detector:
This Javascript code can be used to guess if a particular font is present on the users machine. It uses simple Javascript and some CSS rules to check whether that font is available. This may help desktop-like web application developers when they want to provide different skins or fonts preferences to their users. This may also help various blog skin designers who can provide different fonts for different users based on the list of fonts that their users have.
How does it work?
This code works on the simple principle that each character appears differently in different fonts. So different fonts will take different width and height for the same string of characters of same font-size.
We try to create a string with a specified font-face. If the font-face is not available, it takes up the font-face of the parent element. We then compare the width of the string with the specified font-face and width of the string with the font-face of the parent element, if they are different, then the font exists, otherwise not.
This is great, always wondered how to check for a particular font
nice but …
Times New Roman-false, Trebuchet MS-false, Verdana-false, …. and many other fonts that I actually have on my system :(
Thats very handy! Recently had these problems, when I needed to guess how similar are two different fonts, that was going to be usefull!
Cheers
@Zuriban - try with different browser
@Zuriban
What browser are you using?
I have only tested it with FF 2.0 FF1.5 and IE 6.0
correction, - “false” when I open the page with Opera 9.10, in Firefox 2.0.0.2 everything seems to work well :)
@Zuriban
Yes, I am currently trying to port it to Opera. There seems to be some problem in the way opera treats
offsetWidth. I guess there is some problem with nesting of elements.Looks like a simple and smart idea.
The JavaScript could do with a bit of refactoring, notably to be able to pass the font name whose presence you want to test for as an argument and just have a
Booleanreturned.Apart from that, bravo - smart!
UPDATE
Javascript/CSS Font Detector now works fine on Opera 9.10. It required to execute the script after it is completely loaded. I guess, Opera cannot calculate the offset width untill all the parents are completely loaded.
Smart idea! :)
In Safari (Webkit nightly build), it says “true” for each font regardless of whether I have it or not.
I like this, but what are width/height? They seem wrong for Cursive (187 px width) and monospace (157 px width), as clearly cursive should be less than monospace. Arial Black is a few px wider than monospace, but has a width of 250px+. What’s the deal with this?
I always thought that something like text-clipping: ellipsis; could be done with javascript for Gecko/Opera browsers, any takers? :)
@Paul D
Paul, we are using the same string (in this case ‘mmmmmmmmmml’) for all the type faces, and the font-size is same for all (in this case 24px). After creating a SPAN node in this fashion, we then calculate the width of the SPAN element and compare it with the width of the SPAN element of the default ’sans-serif’ font.
Sorry, my previous comment was was for @black
This also seems to work fine in IE7 and Safari 2.0.4. Very spiffy application!
I must say I found it quite disappointing; there’s nothing really novel here. It assumes the default sans-serif font is Arial (meaning if you change it to any other font the test will fail for your default font), and it will also fail if you try to compare two fonts with the same dimensions — which is the case between Arial and Helvetica, for instance.
Thanks, this is just what I was looking for/trying to code; this is great! There seems to be a lot of potential here for improving web typography. I’m having delirious visions of letter-specific copy set in font-adjusting grids. With real widths, not browser em’s!
Flamer-Disclaimer - I haven’t looked at the code in-depth (at all) yet, so forgive anything obviously silly below:
Some questions:
1. I’m sure the Arial default that triggered the above comment by Daniel is easily changeable, but the larger question seems relevant: are there multiple typefaces (including at least one that is likely to be a default on a client) that have the same x and y dimensions for this particular test string? And if so, are all the character widths (spaces, punctuation marks, and symbols included) in the respective fonts the same, or is it possible to have a more definitive test string that kicks in if, say, the Helvetica/Arial x and y values are detected for the span. Maybe there is still a possibility for truly robust detection…
2. From my severely-limited knowledge of type, I understand that some typefaces may have identical names on different machines, and yet may have differently rendered character sets (and conceivably, different widths/heights on m’s and l’s). How would this affect your code? (Sorry, that sounds like a term exam question)
Questions not to discourage, but to spur you on to new heights of coolness.
I’ll be sure to drop you a line when I’m done with my top-secret project, which will be incorporating your code. Once I read that Apache License…
I wasn’t really happy with the way this worked so I wrote up how you can check for a [particular font using getFontList() and the external interface.
You can see it here with explination: http://foobr.co.uk/2007/03/detect_fonts_with_javascript_and_flash/
@Daniel Luz
I agree with you that if we change the default font, the results may not be the same. I wrote this script to work as “detection” of fonts rather than “identification”, and I think even if we change the default font, we would be able to detect the fonts.
For example. We know that most of the Windows machines have Arial font and Linux machines have Helvetica or Sans. (And as you said, luckily they both have same width.) We wont generally test the presence of Arial or a Verdana Font generally. We would want to detect whether a non-default font is present or not. So before detecting a set of fonts with our script, what we can do is just select a more suitable common comparator font (which I selected as Arial in my case) for which we can detect the presence of all the uncommon fonts we need for our page. So even if two fonts have exactly same dimensions but as long as the dimensions don’t match with the base font, they can be detected.
Thanks.
I agree, Lalit, but you still fall into the problem of depending on a base font for comparisons. Arial is a particularly bad choice because it is a known clone of Helvetica, but you could run out of luck for pretty much any font you chose (it could happen that the base font and the tested font do not have anything in common other than the same dimensions for that very string you chose to test).
Bravo Darling ;)
@Daniel Luz
Since we know beforehand all the fonts that we are going to check, we can select a base font appropriately after testing locally and verifying that its dimensions don’t match with any of the fonts in the test set. Further I have seen that if we change the test string which we use (I am using mmmmmmml) we get different results. Like when I was writing this example, I was getting same dimensions for Tahoma and Trebuchet MS, but when I changed the string, I was able to uniquely differentiate all the fonts.
I agree its a added overhead to start the script working for a site. Drawback is one cannot just plug an play with this script. I will have to make the test more unambiguous so that it would give better results. Thank you for you inputs. I will surely work on this.
Why don’t you take something more complex than mm..l as a test-string? I think it will make it much more reliable, becauce there can be many fonts that have same-size “m”s on 24px. increase font-size too.
Hi there, everyone.
Anyone has any ideason how this font detector can be used?
It’s not of much use to web-designers, since CSS can already sorta “detect fonts”. I mean, you can provide several font-families, and the first one found will work.
One use I thought of was “helper” function to Word/Excel document generator. You use Javascript to test if a font is available on a system, and then create a Word/Excel document with that font. I was thinking about PDF, but PDF embeds fonts inside document for portability, soany font you decide to use will be available when you open PDF.
Maybe some more uses, anyone?
@German Rumm
Some applications like Google Document & Spreadsheets, Browser based chat clients like Meebo, etc can use this.
Johan Sundström has presented this data in a more interesting and cool layout here: http://exhibit.ecmanaut.googlepages.com/installed-fonts.html.
Thanks Johan.
Thank you so much, it’s very usefull to me.
my search before:hair removal treatment
by osit on Tues. Apr. 22, 2008
thank you
العاب باربي
موقع باربي