Get computed font-family in JavaScript

Question

This is a followup to this question.

I am working on a component for the CKEditor, a tweaked version of the font drop-down menus that always display the currently selected font family / size values, no matter where they were defined, using computedStyle and consorts.

As you can see in the other question, determining the font size works cross-browser now. Now I am having trouble working with the fontFamily attribute. My generic "computed style" function returns only the full font string that was defined, e.g.

Times New Roman, Georgia, Serif

What I need, in order to match the setting against the entries in the font family dropdown, is a fixed font name of the actual font of the DOM element I am checking.

Can this be done somehow, at least for the most common web fonts?

Answer 1

The UA picks the first font in the list that it finds installed. The fonts installed on the OS are not really a part of the DOM, so the best you can do is guess.

Answer 2

I don’t think there are any methods to do it directly, but Lalit Patel came up with a clever technique that creates an element with some letters in it, and guesses the font from the width of the element.

See http://www.lalit.org/lab/javascript-css-font-detect