Monday, March 12th, 2007

Javascript/CSS Font Detector

Category: CSS, JavaScript, Library

<p>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.

Font Testing

Related Content:

25 Comments »

Comments feed TrackBack URI

This is great, always wondered how to check for a particular font

Comment by Daniel — March 12, 2007

nice but …
Times New Roman-false, Trebuchet MS-false, Verdana-false, …. and many other fonts that I actually have on my system :(

Comment by Zuriban — March 12, 2007

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

Comment by ajaxus — March 12, 2007

@Zuriban – try with different browser

Comment by ajaxus — March 12, 2007

@Zuriban
What browser are you using?
I have only tested it with FF 2.0 FF1.5 and IE 6.0

Comment by Lalit Patel — March 12, 2007

correction, – “false” when I open the page with Opera 9.10, in Firefox 2.0.0.2 everything seems to work well :)

Comment by Zuriban — March 12, 2007

@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.

Comment by Lalit Patel — March 12, 2007

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 Boolean returned.

Apart from that, bravo – smart!

Comment by Tobie Langel — March 12, 2007

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.

Comment by Lalit Patel — March 12, 2007

Smart idea! :)

Comment by Dominik Hahn — March 12, 2007

In Safari (Webkit nightly build), it says “true” for each font regardless of whether I have it or not.

Comment by Paul D — March 12, 2007

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? :)

Comment by black — March 12, 2007

@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.

Comment by Lalit Patel — March 12, 2007

Sorry, my previous comment was was for @black

Comment by Lalit Patel — March 12, 2007

This also seems to work fine in IE7 and Safari 2.0.4. Very spiffy application!

Comment by Calophi — March 12, 2007

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.

Comment by Daniel Luz — March 12, 2007

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/

Comment by Aaron Bassett — March 13, 2007

@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.

Comment by Lalit Patel — March 13, 2007

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).

Comment by Daniel Luz — March 13, 2007

Bravo Darling ;)

Comment by Bipin — March 13, 2007

@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.

Comment by Lalit Patel — March 13, 2007

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.

Comment by Misha — March 13, 2007

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?

Comment by German Rumm — March 14, 2007

@German Rumm
Some applications like Google Document & Spreadsheets, Browser based chat clients like Meebo, etc can use this.

Comment by Lalit Patel — March 14, 2007

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.

Comment by Lalit Patel — March 21, 2007

Leave a comment

You must be logged in to post a comment.