Suppose I have the following CSS rule in my page:

body {
  font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;

How can I detect which one of the defined fonts was used in the user's browser?

Edit for people wondering why I want to do this: The font I'm detecting contains glyph's that are not available in other fonts and when the user does not have the font I want to display a link asking the user to download that font so they can use my web application with the correct font.

Currently I am displaying the download font link for all users, I want to only display this for people who do not have the correct font installed.

  • 2
    One thing to keep in mind is that some browsers will replace certain missing fonts with similar fonts, which is impossible to detect using the JavaScript/CSS trick. For example, Windows browsers will substitute Arial for Helvetica if it's not installed. The trick MojoFilter and dragonmatank mentioned will still report that Helvetica is installed, even though it isn't. – tlrobinson Aug 4 '08 at 1:05
  • 13
    A small note of caution: If you are offering a link to download Calibri, be aware that although it is bundled within several Microsoft products, it is not a free font, and you are breaching copyright by offering it for download. – Adam Hepton Sep 1 '08 at 8:18

11 Answers 11


I've seen it done in a kind of iffy, but pretty reliable way. Basically, an element is set to use a specific font and a string is set to that element. If the font set for the element does not exist, it takes the font of the parent element. So, what they do is measure the width of the rendered string. If it matches what they expected for the desired font as opposed to the derived font, it's present. This won't work for monospaced fonts.

Here's where it came from: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

| improve this answer | |

I wrote a simple JavaScript tool that you can use it to check if a font is installed or not.
It uses simple technique and should be correct most of the time.

jFont Checker on github

| improve this answer | |
  • 2
    The font detection doesnt solve the problem. You could use it to iterate thought the declared fonts and check what is valid, but it gives little or no information about what font is used for any given div. If you create div's from JS, how can we know what font is used? – Jon Lennart Aasenden Aug 31 '14 at 19:55
  • 1
    @JonLennartAasenden To get the used font I believe you can use the "computedStyle" property (I forgot the exact name but it's something like that.) – Derek 朕會功夫 Aug 31 '14 at 20:38
  • 1
    I wrote a class that works in all browsers. It's written in Smart Pascal which compiles to JS, so i cant really post the solution here - but in short, i had to extract the font-family string, then check that each font was valid, grab the first that was valid - and that works everywhere. I ported over "font detector" to smart pascal and did some tweaks. – Jon Lennart Aasenden Sep 4 '14 at 18:03
  • 1
    @JonLennartAasenden It does not sound like your class is foolproof. Browsers will check each font in priority given, if installed, but will sometimes opt to use a lower priority font in the list, if the higher priority, installed font has missing characters or glyphs that do not match requested sizes. – Brandon Elliott Jul 10 '16 at 23:05

@pat Actually, Safari does not give the font used, Safari instead always returns the first font in the stack regardless of whether it is installed, at least in my experience.

font-family: "my fake font", helvetica, san-serif;

Assuming Helvetica is the one installed/used, you'll get:

  • "my fake font" in Safari (and I believe other webkit browsers).
  • "my fake font, helvetica, san-serif" in Gecko browsers and IE.
  • "helvetica" in Opera 9, though I read that they are changing this in Opera 10 to match Gecko.

I took a pass at this problem and created Font Unstack, which tests each font in a stack and returns the first installed one only. It uses the trick that @MojoFilter mentions, but only returns the first one if multiple are installed. Though it does suffer from the weakness that @tlrobinson mentions (Windows will substitute Arial for Helvetica silently and report that Helvetica is installed), it otherwise works well.

| improve this answer | |

A technique that works is to look at the computed style of the element. This is supported in Opera and Firefox (and I recon in safari, but haven't tested). IE (7 at least), provides a method to get a style, but it seems to be whatever was in the stylesheet, not the computed style. More details on quirksmode: Get Styles

Here's a simple function to grab the font used in an element:

 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;

If the CSS rule for this was:

#fonttester {
    font-family: sans-serif, arial, helvetica;

Then it should return helvetica if that is installed, if not, arial, and lastly, the name of the system default sans-serif font. Note that the ordering of fonts in your CSS declaration is significant.

An interesting hack you could also try is to create lots of hidden elements with lots of different fonts to try to detect which fonts are installed on a machine. I'm sure someone could make a nifty font statistics gathering page with this technique.

| improve this answer | |
  • 6
    This returns the full string of the css like "Helvetica,Arial,sans-serif". It doesn't return the actual font being used. – Tom Kincaid Oct 2 '13 at 18:09

A simplified form is:

function getFont() {
    return document.getElementById('header').style.font;

If you need something more complete, check this out.

| improve this answer | |

There is a simple solution - just use element.style.font:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;

This function will exactly do what you want. On execution It will return the font type of the user/browser. Hope this will help.

| improve this answer | |
  • I'm trying this in Safari on an element that definitely has the Arial font and I'm getting "" as the font. Any ideas as to why? – Alessandro Vermeulen Jul 4 '13 at 8:52
  • The most likely reason is that this only checks for a set font, and if there is no font set, it probably is using Arial as the font. – Josiah Jan 11 '16 at 19:40
  • 1
    @AlessandroVermeulen it's because element.style only returns values set in style attributes, and will not return any values from elsewhere (i.e. values from style elements, external css or user-agent default will not get returned). This answer should be removed because it is misleading/incorrect. Unbelievable that it got a bounty! – brennanyoung May 16 '19 at 8:46
  • I'm sorry, but I don't think this is the right answer. While this prints out the value for that CSS property, it does not return the actual rendered font that is being used by the browser. – wentjun Jul 9 at 11:32

Another solution would be to install the font automatically via @font-face which might negate the need for detection.

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");

Of course it wouldn't solve any copyright issues, however you could always use a freeware font or even make your own font. You will need both .eot & .ttf files to work best.

| improve this answer | |

Calibri is a font owned by Microsoft, and shouldn't be distributed for free. Also, requiring a user to download a specific font isn't very user-friendly.

I would suggest purchasing a license for the font and embedding it into your application.

| improve this answer | |
  • 3
    +1 for font embedding. This solves the issue without having to detect anything. – Andrew Grothe Mar 22 '13 at 15:58
  • 1
    I would suggest checking Google Fonts for something similar before purchasing anything. – OJFord Jan 20 '14 at 6:56
  • Except, that, if the user is on a windows machine they can then view Calibri. This is the entire point of fallback lists. – dudewad Apr 30 '15 at 22:30
  • 1
    And your answer is not related to the question, and should be a comment. – dudewad Apr 30 '15 at 22:31

I am using Fount. You just have to drag the Fount button to your bookmarks bar, click on it and then click on a specific text on the website. It will then show the font of that text.


| improve this answer | |

You can use this website :


It does exactly what you want...

| improve this answer | |

You can put Adobe Blank in the font-family after the font you want to see, and then any glyphs not in that font won't be rendered.


font-family: Arial, 'Adobe Blank';

As far as I'm aware there is no JS method to tell which glyphs in an element are being rendered by which font in the font stack for that element.

This is complicated by the fact that browsers have user settings for serif/sans-serif/monospace fonts and they also have their own hard-coded fall-back fonts that they will use if a glyph is not found in any of the fonts in a font stack. So browser may render some glyphs in a font that is not in the font stack or the user's browser font setting. Chrome Dev Tools will show you each rendered font for the glyphs in the selected element. So on your machine you can see what it's doing, but there's no way to tell what's happening on a user's machine.

It's also possible the user's system may play a part in this as e.g. Window does Font Substitution at the glyph level.


For the glyphs you are interested in, you have no way of knowing whether they will be rendered by the user's browser/system fallback, even if they don't have the font you specify.

If you want to test it in JS you could render individual glyphs with a font-family including Adobe Blank and measure their width to see if it is zero, BUT you'd have to iterate thorough each glyph and each font you wanted to test, but although you can know the fonts in an elements font stack there is no way of knowing what fonts the user's browser is configured to use so for at least some of your users the list of fonts you iterate through will be incomplete. (It is also not future proof if new fonts come out and start getting used.)

| improve this answer | |

Your Answer

