[ACCEPTED]-How to detect which one of the defined font was used in a web page?-fonts

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

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

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

jFont Checker on github

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

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

Assuming Helvetica is the one 10 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 9 at this problem and created Font Unstack, which tests 8 each font in a stack and returns the first 7 installed one only. It uses the trick that 6 @MojoFilter mentions, but only returns the 5 first one if multiple are installed. Though 4 it does suffer from the weakness that @tlrobinson 3 mentions (Windows will substitute Arial 2 for Helvetica silently and report that Helvetica 1 is installed), it otherwise works well.

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

Here's 12 a simple function to grab the font used 11 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 10 it should return helvetica if that is installed, if 9 not, arial, and lastly, the name of the 8 system default sans-serif font. Note that 7 the ordering of fonts in your CSS declaration 6 is significant.

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

A simplified form is:

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

If you need something 1 more complete, check this out.

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

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

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

Another solution would be to install the 6 font automatically via @font-face which might negate 5 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 4 solve any copyright issues, however you 3 could always use a freeware font or even 2 make your own font. You will need both .eot & .ttf files 1 to work best.

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

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

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

https://fount.artequalswork.com/

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

e.g.:

font-family: Arial, 'Adobe Blank';

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

This is complicated by 26 the fact that browsers have user settings 25 for serif/sans-serif/monospace fonts and 24 they also have their own hard-coded fall-back 23 fonts that they will use if a glyph is not 22 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 21 on your machine you can see what it's doing, but 20 there's no way to tell what's happening 19 on a user's machine.

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

so...

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

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

You can use this website :

http://website-font-analyzer.com/

It does exactly 1 what you want...