This Question have 3 answers right now.

Detecting which font was used in a web page

Question!

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.

By : Pat


Answers

@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.

FontUnstack

By : philoye


You can use this website :

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

It do exactly what you want...



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




Can cufon style form text input and textarea?

Text extra aliased(jagged) in IE - looks terrible - but OK in FF and Chrome

How can I avoid seeing the rendering of Cufon font replacement tool while loading a page?

Why do designers use sIFR if they can use @font-face?

how are these fonts being rendered by referencing a .js file?

Is there a way to show a font that is not supported by a browser?

Adding fonts to HTML/CSS code for website users (cross-browser)

Is there an elegant way to handle supporting using multiple fonts with a word

How to check if the font has a symbol

How can I tell whether a 'font-family' request was honoured so that I can substitute an image if necessary?

Replace a text color by a background image on mouse over

Identifying font embedding mechanism

How to have transparent fonts except for the 'text-caret' in a textarea?

Check if a font is installed

$.width() returns different results when using custom fonts

Google fonts in windows is jagged

State of the art / best practice for using custom fonts on webpages?

Google webfont loads after div is rendered? [duplicate]

Different font sizes on website

Video about Detecting which font was used in a web page