Search code examples
htmlfontswebfonts

Check for character in web font

How can I test if a particular web font contains a particular Unicode character? I can't simply include the character in some text, because a browser's font substitution mechanism may choose another font to display the character.

EDIT

This is the best solution I have been able to come up with so far:

First, you must download the LastResort font from Unicode: https://www.unicode.org/policies/lastresortfont_eula.html. (This is a bit tricky - I kept getting "network error", but in the end I succeeded.)

The LastResort font allegedly has a replacement icon for every Unicode character.

Now, let's assume that I want to check if the Google fonts "Pacifico" and "Merienda" contain the Unicode characters F and Ф (Unicode character 0424). I can use this code:

<!DOCTYPE html>
<html>
  <head>
    <title>Font detect</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merienda">
    <style>
      @font-face {
        font-family: 'LastResort';
        src: url('LastResort.ttf') format('truetype');
      }

      p.pacifico {
          font-family: Pacifico, LastResort;
          font-size: 60pt;
      }

      p.lato {
          font-family: Merienda, LastResort;
          font-size: 60pt;
      }
    </style>

  </head>
  <body>
    <p class="pacifico">F &#x424;</p>
    <p class="lato">F &#x424;</p>
  </body>
</html>

This will display thus:

enter image description here

For Pacifico, both F and Ф are displayed, but for Merienda the Russian character Ф is replaced by a default icon from LastResort. So Pacifico contains Ф, Merienda does not.

Now, I don't know if this is a foolproof method, and I don't know if there is a simpler way to do it.

Solution

  • Wakamai Fondue is a tool that will tell you about which characters a font contains. It'll also tell you about any OpenType feature inside the font, and some more details. (Full disclosure: I wrote that tool)

    If you want to check it at the client side, I think there's no way around trying to render the character and then check if it's actually been rendered. If you use Adobe Blank as a fallback font you could check if it rendered the character (width would be > 0) or not (width would be 0).