Get computed font-family in JavaScript

javascript css computed-style
Pekka picture Pekka · Dec 25, 2009 · Viewed 8.3k times · Source

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

Paul D. Waite picture Paul D. Waite · Dec 25, 2009

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 (archive)

Related questions

How do I get a computed style?

Can anybody please help me with a script.. or a way to get the value of height : 1196px; width: 284px; from the computed style sheet (webkit). I know IE is different- as usual. I cannot access the iframe (cross domain)—…

Read More
Detecting width: auto in jQuery

I'm retrieving the width of elements using jQuery and would prefer it if I could have an indication of whether there was an explicit width (and height) specified. <div id="test"></div> <script type="text/…

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More