[html5] Accessing the user's installed fonts

Jukka K. Korpela jukka.k.korpela at kolumbus.fi
Mon Jul 29 04:01:48 PDT 2013

2013-07-24 18:02, Oliver Sartun wrote:
> for all I know it's not possible to retrieve a list of all fonts a
> user has installed on his system via JavaScript. Is that correct?

It's not possible to retrieve such information in any standardized manner.

> You either have to use Flash or a rather hackish solution that
> involves assigning a potentially installed font to a DOM element and
> measuring its dimensions
There's also an old trick that works on IE (only), see e.g.

I've used it on my page that lets you view (on IE) a piece of text in 
all the fonts installed on your system:
There are other similar services, and this might look like something you 
should do with software installed on your system. But I think it is an 
interesting possibility to implement it with HTML and JavaScript.

> For
> instance, it wouldn't be possible to create advanced word processors /
> DTP applications like InDesign for the open web platform, if I get
> that right.

A more common need for access to font information arises if you wish to 
create an HTML application that has a simple font changer – e.g., a 
dropdown that lets the user select the font of the copy text, or some 
special text.

Even more often, authors face the problem of not knowing which of the 
fonts of their font-family list gets (or may get) applied. I can specify 
in CSS e.g. body { font-family: Calibri, Helvetica, Arial, sans-serif }, 
but how could I select other presentation to suit the font? I can't. For 
example, Helvetica and Arial need a considerably larger line-height than 
Calibri. Just relying on line-height: normal is not reasonable. Line 
height should also depend on line length and other issues; the "normal" 
value is, at best, a compromise.

Typographic settings should depend on each other. The choice of a font 
should affect many other aspects. Authors who care about typography 
could do some simple programming to make the style settings different 
depending on e.g. the availability of the primary font. (One style if 
Calibri is available; something else if not, since we can pretty much 
expect virtually any system to have Arial or Helvetica.)

The problem is that CSS does not have tools for it, so access to font 
list in JavaScript would indeed be desirable. This has been said years 
ago, and it seems that reluctance to implement it largely depends on 
expected security issues, basically security of personal data; see e.g.
"Feature request: Get font list in Javascript",

I think the usefulness of disclosing the information far exceeds the 
real impact of the risks. Currently, information about fonts is 
available in ways mentioned above - clumsy, hackish ways - so if this 
were a serious security breach, I think we would have heard of attacks 
using it. Providing a simple, standardized access to information would 
mainly help people who would use it to improve the quality of 
applications or pages.

Yucca, http://www.cs.tut.fi/~jkorpela/

More information about the Help mailing list