Snippets → JavaScript → Check if font-family is Honored

Check if font-family is Honored

Chris Coyier on 
function checkFont(strFamily) { var objDiv = document.createElement('div'); objDiv.style.fontFamily = strFamily; objDiv.appendChild(document.createTextNode('FONT TEST')); if (window.getComputedStyle) { return window.getComputedStyle(objDiv, null).getPropertyValue('font-family') === strFamily; } return objDiv.currentStyle.fontFamily === strFamily; }

Usage

var iconFontHonored = checkFont('icomoon');
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Ryan McKay
    Permalink to comment#

    Neat! Useful, thanks :)

    Reply
  2. 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.

    Here: http://codepen.io/anon/pen/HIKDq
    Chrome reports all are missing, Firefox reports all available.

    Reply
  3. Robert
    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.

    Reply
  4. Adam
    Permalink to comment#

    Try using: https://github.com/Wildhoney/DetectFont

    import { detectFont, supportedFonts } from 'detect-font'; const element = document.querySelector('.element'); console.log(detectFont(element));
    Reply
  5. 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.

    Reply

Leave a Reply