Home » Javascript » Detecting which font was used in a web page

Detecting which font was used in a web page

Posted by: admin November 29, 2017 Leave a comment


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.


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.

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


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


There is a simple solution

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 User/visitor Browsers Font Type. Hope this will help


@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

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.



A simplified form is:

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

If you need something more complete, check this out.


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.


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.


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.


You can use this website :


It does exactly what you want…


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.