JavaScript / CSS Font Detector - Detect fonts available in a browser

JavaScript/CSS Font Detector

on Saturday, March 10th, 2007 at 11:19 am

JavaScript 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, 3, 3.5 IE 6, IE 7, Opera 9, Opera 10.

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

^{Update (10-Jul-09)} Fixed the Tests failing on Firefox 3 issue. changed comparison font to serif from sans-serif, as in FF3.0 font-face of child element didn’t fallback to font-face of parent element if the font-face of child element is missing.

Download

Get the JavaScript code here.

Released under CC Attribution-ShareAlike 2.5

You can also see Lemmi’s version of the script as Prototype plug-in here.

Demo

You can test any Font here:

// Usage
var detective = new Detector();
alert(detective.test('font name'));

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?

(About this post)

42 Responses to “JavaScript/CSS Font Detector”

Different sizes for alternative fonts? - Webforumz.com Says:
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 [...]
Ellen Says:
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.
Lalit Says:
July 23rd, 2008 at 12:09 am

@Ellen, you are on FF3?
rel=me » Blog Archive » Font detection with Javascript and Flash Says:
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) [...]
Javascript猜测 Says:
July 30th, 2008 at 5:54 pm

[...] 电脑上是否安
Francois Dagorn Says:
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
Lalit Says:
September 3rd, 2008 at 11:52 pm

@François
You are right, I breaks on Vista/FF3
Will fix over this weekend.
Ravi Says:
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!
Dana Says:
September 17th, 2008 at 7:17 am

Well It works great on my IE 7.0.5730.11
But not in Crome 0.2.149.29 and FireFox 3.0.1
geat idea though
doug Says:
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
Rodrigo Says:
October 21st, 2008 at 2:57 am

This approach is quite innovative!
Flipping Typical / Melodycode.com - Life is a flash Says:
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). [...]
Yoan Says:
January 6th, 2009 at 1:28 pm

I would be very nice to collect the UA and OS and do a little survey of the available fonts in which we can rely on.

I.e. on Opera mobile, I see only sans-serif, monospace and courier new as detected (which seems accurate by the way).

Cheers,
A new popular font browser Flipping Typical - WittySparks Says:
January 8th, 2009 at 12:04 am

[...] Download the Javascript under CC Attribution-ShareAlike [...]
links for 2009-01-13 Says:
January 13th, 2009 at 8:00 pm

[...] JavaScript / CSS Font Detector – Detect fonts available in a browser | lalit.org JavaScript code to detect available availability of a particular font in a browser using JavaScript and CSS. [...]
Javascript/CSS detect browser fonts « Louis Ramos’ Blog Says:
February 14th, 2009 at 10:14 pm

[...] Original idea found at lalit.org [...]
David Ruiz Says:
March 17th, 2009 at 4:24 pm

Cool! Great idea compare font sizes. But I had problems with Firefox:

When Firefox don’t find the font, not always shows ’sans-serif’ type. Changing next line solves it:
f[0] = s.style.fontFamily = font;
to
f[0] = s.style.fontFamily = font + “, sans-serif”;

Anyway, good work.
Dave Ruiz blog » Fuentes no estandar en tu web con jQuery Says:
March 17th, 2009 at 8:09 pm

[...] He actualizado el código. Ahora detecta si la fuente está instalada (gracias al código de Lalit) y no hace nada en caso afirmativo. Además, si el elemento a sustituir es un contenedor de enlace [...]
Filpping Typical: What The Fonts Installed In Your Computer Looks Like on Your Browser | Orangeinks Says:
March 24th, 2009 at 11:31 am

[...] We create some hidden elements and measure them before and after changing their font-family. It turns out that this isn’t a new idea. [...]
classid - bytes Says:
April 22nd, 2009 at 4:34 pm

[...] If you want a list of installed fonts, you may want to check out this link. [...]
classid: get list of installed fonts - bytes Says:
April 22nd, 2009 at 5:01 pm

[...] If you want a list of installed fonts, you may want to check out this link. [...]
Tagz | "JavaScript / CSS Font Detector - Detect fonts available in a browser | lalit.org" | Comments Says:
May 16th, 2009 at 10:25 pm

[...] [upmod] [downmod] JavaScript / CSS Font Detector – Detect fonts available in a browser | lalit.org (www.lalit.org) 1 points posted 4 months, 1 week ago by jeethu tags javascript typography [...]
Matt Says:
July 9th, 2009 at 4:25 am

It’s a great idea, and it works on my IE7. Unfortunately, this does not seem to work on Firefox 3.5 (Mac or Win) or Safari (Mac) – it is listing everything as “True.”
Lalit Says:
July 9th, 2009 at 11:25 pm

Fixed the Firefox bug. Now works on Firefox 3.0 and 3.5
Also changed the API a bit, test() function returns boolean instead of an array. For detailed info use detailedTest() instead.

Thanks @David Ruiz, @François, @Dana
Elsewhere, on August 14th - Once a nomad, always a nomad Says:
August 14th, 2009 at 9:37 am

[...] Shared JavaScript / CSS Font Detector – Detect fonts available in a browser | lalit.org [...]
mvg Says:
August 18th, 2009 at 11:10 pm

JavaScript / CSS Font Detector – Detect fonts available in a browser | lalit.org great article thank you.
Of stacks and faces | Angry Monkeys Says:
August 31st, 2009 at 6:59 am

[...] this issue is to detect which fonts a user has installed via font detection scripts like this or this. Using this method a script could automatically adjust the font size at runtime to ensure a [...]
kurye Says:
September 2nd, 2009 at 2:24 am

JavaScript / CSS Font Detector – Detect fonts available in a browser | lalit.org great article thank you.
Jean-Sebastien Dussault Says:
September 8th, 2009 at 11:13 pm

Had trouble making the dowloadable script work in IE (8) as it was returning a false negative. The script embedded on this page worked fine, though, so I had a look at the difference.

The downloadable version was using “sans” as a comparator, even if the comments following it said “serif font used as a comparator”. Changed it to serif, and everything was A-OK.

BTW, the version using “sans” worked fine under FF 3.5.3.
Mark Says:
September 14th, 2009 at 10:14 pm

I have looked in to your script as I have built me own script sort of like this but less complex.

Your script doesn’t detect (accurately) if Calibri is in fact installed. It always evalutates as false (Windows Vista Business Edition IE 6, 7, UNLESS you campare it using Arial. Then it will return it more accurately. Is there a good reason why you used “sans”?

I found that it is only an issue with IE (most of the market share).

Let me know what you think.
Detecta si una fuente está disponible desde Javascript | aNieto2K Says:
November 16th, 2009 at 2:18 pm

[...] ya tiempo que mediante Javascript es posible detectar la disponibilidad de una fuente en el navegador del [...]
Detecta si una fuente está disponible desde Javascript : Blogografia Says:
November 16th, 2009 at 2:50 pm

[...] ya tiempo que mediante Javascript es posible detectar la disponibilidad de una fuente en el navegador del [...]
Detecta si una fuente está disponible desde Javascript Says:
November 16th, 2009 at 8:05 pm

[...] [...]
_asterix_ Says:
November 24th, 2009 at 1:19 am

Wow! This is a gerat Solution. Thank you very much.
Emlyn Says:
January 14th, 2010 at 11:46 pm

OS X 10.5 using FF 3.5.7 and all testing works fine (including Calibri).

Great temp fix until CSS3 is in play–tx.
Woodrow Says:
February 12th, 2010 at 7:06 pm

Great stuff! But:

the detector faultily detects that “Times New Roman” is not installed. This is because you use “serif” as a comparison-font (which is basically the same as TNR) but only check for one of these two fonts here:
<>

Based on the comment that can be found there (”to set arial and sans-serif true”) I bet that a) you used “Arial” as a comparison-font for some time and b) you had the same issue then as well. So I guess you know what I mean ;^)
Woodrow Says:
February 12th, 2010 at 7:07 pm

great … (-.-’ )

I was talking about this line:

if (font == “serif”)
Charley Segalla Says:
March 5th, 2010 at 7:11 am

Hi, I came across this article while searching for help with JavaScript. I’ve recently changed browsers from Safari to Microsoft IE 6. Now I seem to have a problem with loading JavaScript. Every time I browse page that needs Javascript, the page freezes and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any help is very appreciated! Thanks
¿Y quién diablos es @font-face? | Todowebhosting.com - ..::HOSTING - DISEÑO WEB - FACTURACIÓN ELECTRÓNICA Says:
May 25th, 2010 at 3:33 am

[...] Flash (sIFR), Canvas/VML (Cufón), la librería GD de PHP (FLIR), etc. así como sistemas de detección de fuentes instaladas entre otros muchos inventos que han funcionado más o menos bien, pero que finalmente no dejan de [...]

Lemmi Says:
May 30th, 2010 at 9:48 pm

First, your script is a great idea to find out which font is installed. Keep going!
I often work with the Framework Prototype, so here is a class based on the Prototype methods.

var Checkfont = Class.create({
    checkedFonts: new Hash(),
    testString: 'mmmmmmmmmmlilg',
    testFontSize: '72px',
    standardFont: 'serif',
 
    initialize: function() {
        this.body = document.body;
        this.span = new Element('span').hide();
 
        this.body.insert(this.span);
        this.defaultDimensions = this._getFontDimensions(this.standardFont);
    },
 
    test: function(font) {
        font = font.toLowerCase();
 
        var alreadyChecked = this.checkedFonts.get(font);
        if (!Object.isUndefined(alreadyChecked)) {
            return alreadyChecked;
        }
 
        this.testDimensions = this._getFontDimensions(font);
 
        var test = true;
        if (font != this.standardFont) {
            test = (this.testDimensions.width != this.defaultDimensions.width
                || this.testDimensions.height != this.defaultDimensions.height);
        }
        this.checkedFonts.set(font, test);
        return test;
    },
 
    _getFontDimensions: function(font) {
        this.span.setStyle({
            fontFamily: font,
            fontSize: this.testFontSize
        }).update(this.testString);
        var fontDimensions = this.span.getDimensions();
        this.span.update();
        return fontDimensions;
    }
});

viplog Says:
June 2nd, 2010 at 11:39 pm

‘JavaScript / CSS Font Detector’-Add-On for Prototype…

Today I want to show you a little class for detecting fonts on the users operation system based on the great idea of Lalit Patel. As you can read in his detailed article it’s a small script based on CSS and JavaScript. ‘Merde! This looks si…
Lalit Says:
June 3rd, 2010 at 10:54 am

Thanks Lemmi for the Prototype version of the script.
Cheers!

lalit.lab