Check if font-family is Honored

function checkFont(strFamily) {
  var objDiv = document.createElement('div'); = strFamily;
  objDiv.appendChild(document.createTextNode('FONT TEST'));

  if (window.getComputedStyle) {
      return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily;

  return objDiv.currentStyle.fontFamily === strFamily;


var iconFontHonored = checkFont('icomoon');


  1. User Avatar
    Ryan McKay
    Permalink to comment#

    Neat! Useful, thanks :)

  2. User Avatar
    Federico Brigante
    Permalink to comment#

    This is 100% incorrect. The value of window.getComputedStyle(objDiv, null).getPropertyValue('font-family') will always be what you declared.

    Chrome reports all are missing, Firefox reports all available.

  3. User Avatar
    Permalink to comment#

    If the topic is validating available fonts I’m not getting how this will help. What I need, and what I think most designers need, is a script that will tell me which of the fonts in the font stack appears when the page appears on each browser and OS.

  4. User Avatar
    Permalink to comment#

    Try using:

    import { detectFont, supportedFonts } from 'detect-font';
    const element = document.querySelector('.element');
  5. User Avatar
    Shagen Ogandzhanian
    Permalink to comment#

    Unfortunately this won’t work at all – in Firefox it will always return true and in Chrome it will always return false.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.