Detecting which font was used in a web page

Suppose I have the following CSS rule in my page:

<code><span class="pln">body </span><span class="pun">{</span>
    <span class="kwd">font-family</span><span class="pun">:</span><span class="pln"> Calibri</span><span class="pun">,</span><span class="pln"> Trebuchet MS</span><span class="pun">,</span><span class="pln"> Helvetica</span><span class="pun">,</span><span class="pln"> sans-serif</span><span class="pun">;</span>
<span class="pun">}</span></code>

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.

Add Comment

  • 1 Answer(s)

    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 (; 12 Mar 2007)

    Answered on March 12, 2017.
    Add Comment

  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.