How to detect which one of the defined font was used in a web page?

Deeper with JavaScript

Sometimes, the desired font isn’t explicitly stated in computed styles or is substituted by the browser. A more precise method includes measuring the width of a string rendered in the text, comparing this to the width of the string in your fonts.

Here's a function that does this:

function stringWidthInFont(text, font) {
  // Create a temporary canvas (better than using another dimension 😅)
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.font = font;
  // Check out my width, ladies! 😎
  return context.measureText(text).width;
}


You'd call this function with the font stack and the string you're testing. Be careful with monospaced fonts, they could lead to ambiguous results due to the equal widths.

Libraries at your service!

Several font detection libraries are available, saving you time and providing accuracy. These include Font Face Observer and jFont Checker.

These tools verify fonts on the user's machine, and ensure the correct font is in use while accommodating browser-specific quirks.

An interesting tool is Font Unstack, helpful for identifying the first installed font when multiple fonts are defined.

Font not detected?

Consider giving your users the option to download the appropriate font. Remember though, only offer free-to-distribute fonts. We don't want any pesky copyright issues coming in our way! 😅

Browser inspector tool: Your best friend

Web 🕵️‍♂️ Inspector Tool in browsers can reveal the CSS font-family declaration, and computed styles to further verify your JavaScript font detection.

Browser discrepancies: The unexpected guest

Be aware that some browsers, like Safari or Opera, may secretly substitute fonts. You can see why using JavaScript measurements and library usage is invaluable.

Glyph checks: Speaking your language

Ensure your font supports all necessary characters for your application. This is really important for global applications where you need different glyphs for different languages.

Key points to remember

Keep these pointers in mind for a comprehensive font detection approach:

• Fallback behavior: Prioritize font ordering in your CSS declaration, you get to control the fallback behavior.
• False positives: Some fonts are eerily similar, like Arial and Helvetica. Your measurements should account for this.
• Font support: The detected font must support all necessary characters.
• Font statistics: Gather data on font availability across your user base for better informed design decisions.
• Canvas technique: Use a canvas to sketch the text, analyze pixel data for color and shape to match with the intended font.