Comments on: Javascript/CSS Font Detector

By: Lalit Patel

Lalit Patel — Wed, 21 Mar 2007 05:47:06 +0000

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.

By: Lalit Patel

Lalit Patel — Wed, 14 Mar 2007 18:18:54 +0000

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

By: German Rumm

German Rumm — Wed, 14 Mar 2007 12:11:27 +0000

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?

By: Misha

Misha — Tue, 13 Mar 2007 15:40:45 +0000

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.

By: Lalit Patel

Lalit Patel — Tue, 13 Mar 2007 13:09:35 +0000

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

By: Bipin

Bipin — Tue, 13 Mar 2007 13:04:14 +0000

Bravo Darling ;)

By: Daniel Luz

Daniel Luz — Tue, 13 Mar 2007 12:23:19 +0000

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

By: Lalit Patel

Lalit Patel — Tue, 13 Mar 2007 12:01:26 +0000

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

By: Aaron Bassett

Aaron Bassett — Tue, 13 Mar 2007 09:18:18 +0000

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/

By: Daniel Luz

Daniel Luz — Mon, 12 Mar 2007 21:46:07 +0000

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.

By: Calophi

Calophi — Mon, 12 Mar 2007 13:49:37 +0000

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

By: Lalit Patel

Lalit Patel — Mon, 12 Mar 2007 11:15:43 +0000

Sorry, my previous comment was was for @black

By: Lalit Patel

Lalit Patel — Mon, 12 Mar 2007 11:14:36 +0000

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

By: black

black — Mon, 12 Mar 2007 10:35:15 +0000

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

By: Paul D

Paul D — Mon, 12 Mar 2007 10:19:22 +0000

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

By: Dominik Hahn

Dominik Hahn — Mon, 12 Mar 2007 10:13:55 +0000

Smart idea! :)

By: Lalit Patel

Lalit Patel — Mon, 12 Mar 2007 08:03:05 +0000

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.

By: Tobie Langel

Tobie Langel — Mon, 12 Mar 2007 07:24:01 +0000

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!

By: Lalit Patel

Lalit Patel — Mon, 12 Mar 2007 07:19:05 +0000

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

By: Zuriban

Zuriban — Mon, 12 Mar 2007 07:09:05 +0000

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