JavaScript/CSS Font Detector
on Saturday, March 10th, 2007 at 11:19 amJavaScript code to detect available availability of a particular font in a browser using JavaScript and CSS.
I wrote a JavaScript code which can be used to guess if a particular font is present in a machine. This may be help of desktop-like web application developers when they want to provide different skins or fonts preferences to their users. This may also be help for blog skin designers which can provide different fonts for different users based on the list of fonts on their machine. Designers don’t have to rely on the most common fonts like Arial, Verdana or Times New Roman. Since increasing number of users have modern PC with new operating system / applications, they may very well have a wide array of other common fonts in their machine.
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.
The string which we will use to generate the widths can be anything. But I guess we use ‘m’ or ‘w’ because these two characters take up the maximum width. And we use a trailing ‘l’ so that the same width fonts-faces can get separated based on the width of l character.
I have tested it on Firefox 2, IE 6, IE 7.
Update Now works on Opera 9.10. It required to execute the script after its completely loaded. I guess, Opera cannot calculate the offset width until all the parents are completely loaded.
Download
Get the JavaScript code here.
Released under CC Attribution-ShareAlike 2.5
Demo
You can test any Font here:
Fonts on your computer
This table below shows which fonts are present on your system. (I have listed some of the most common and some uncommon fonts.)
Johan Sundström has presented this data in a more interesting and cool layout here. Thanks Johan!
| Font Name | Width | Height | Detected? |
|---|
June 1st, 2008 at 5:34 pm
[...] what you’re trying to do, and I think the only way you could solve this would be with the help of JavaScript font detection. Ok, so it’s not the *ideal* solution, but it will work in most cases (and should degrade nicely [...]
July 22nd, 2008 at 8:39 pm
There is a problem.
According to the list you offer, it must only use the pc names for the fonts … I am on a mac (OS X 10.4) and have Bookman Oldstyle, Bradley Hand, Century Schoolbook, Garamond and some others (including “default” )that your script returned as false.
In addition, even with some that it returned true, the associated text did not appear in the specified font.
I really like this idea, at least until CSS3 font: url(); gets implemented.
July 23rd, 2008 at 12:09 am
@Ellen, you are on FF3?
July 26th, 2008 at 9:01 am
[...] Then check the actual width (via offsetWidth). If it does not match the offsetWidth of the fallback font, then we know it rendered ok. (The original idea is from http://www.lalit.org/lab/javascript-css-font-detect) [...]
July 30th, 2008 at 5:54 pm
[...] 电脑上是否安
September 3rd, 2008 at 8:17 pm
I’m was looking for a way to detect wether or not stix fonts are installed
on a laptop. I’ve found your script, good idea !
Unfortunately under vista it seems to always answer ‘true’ even if the
font is not installed !
Any idea ?
Cheers.
François
September 3rd, 2008 at 11:52 pm
@François
You are right, I breaks on Vista/FF3
Will fix over this weekend.
September 5th, 2008 at 4:25 am
I tried it on Chrome/Vista. It always shows true too. But some how it seems to show correctly on first run. That is close your browser and run it first. If you refresh, than it starts showing true for everything!
September 17th, 2008 at 7:17 am
Well It works great on my IE 7.0.5730.11
geat idea though
But not in Crome 0.2.149.29 and FireFox 3.0.1
September 18th, 2008 at 7:02 pm
Hi Lalit
I am hoping you script will work for our site. We have designed 2008.vensystems.co.uk using Calibri - now we’ve tested the font-family, we’ve realised our menu’s and tables do not allow for the additional width of all other sans-serif fonts. Would your code be able to detect and replace Calibri with another font set to a different size?
Many thanks in advance,
Doug
October 21st, 2008 at 2:57 am
This approach is quite innovative!
January 5th, 2009 at 5:03 pm
[...] News / Surfing Benvenuto! Se sei un nuovo visitatore ti consiglio di iscriverti al mio Feed RSS in modo da essere sempre aggiornato riguardo l’uscita di nuovi articoli oppure sbirciare tra i tutorials ed i progetti.Per avere un’idea del best-content presente in questo blog puoi leggere il post intitolato “Ed ora è il momento di rilanciare alcune iniziative! (1a parte e 2a parte)”.Buona navigazione e grazie per la visita!C’è chi è ancora in ferie e chi lavora, il primo articolo del 2009 è un no-sense cioè un sito che se non sarebbe proposto sarebbe uguale
Navigando qui e la ho scoperto flippingtypical.com che come viene spiegato nella sezione wtf (trad: ma che ca**o) serve ad esplorare i font installati nel proprio computer (rilevati mediante questa tecnica). [...]