How to check if the font has a symbol

Question

I have the following css rule in my document

font-family: "Trebuchet MS", Tahoma;

but I found out that some browsers have Trebuchet MS font
without symbols I need (some language with non-latin characters).
And in this case browser shows squares instead of symbols.

How can I check it (probably via javascript)?
(i.e. how can I check if some symbols are missing in the
font installed in my visitor's browser)

Answer 1

On Windows you may be able to detect from JavaScript which characters are missing from a font by:

a) creating a designer detector font that contains a very wide notdef character of say 100pt wide. The detector font needs to be a proportional font, constructed similar to the Adobe notdef font AND-Regular.otf. (this link may be relevant too?).

b) Use the detector font as the fallback font (here I am using adobe notdef as the detector font) e.g.

    <div style="font-family: sans-serif, Segoe UI symbol, adobe notdef">
       &#xFFFD;test&#x25a1;&#x25AF;&#x1F618;&#x1F605;
       &#x1F617;&#x1F60E;&#x1F60E;&#x1F30A;&#x1F30A;&#x1F600;
    </div>

Now you can test a single unicode character by putting it into a div with display: inline-block to force minimum width.

If the glyph is not in the list of fonts, then the notdef glyph from the last font will be used, which will be 100pt wide, which can be detected in javascript from the offsetWidth of the div.

I explored the idea enough to validate that it is very likely to work, but I didn't have enough time to actually make working code, sorry!

I would expect the technique to work on other operating systems too (unless browsers render the .notdef character in another font!).

Alternatively, you could use a zero width font like Adobe blank which has a zero width .notdef character 0 (the AdobeBlank.otf file is only 20kb). This could detect missing glyphs, because the div containing a missing glyph will end up with an offsetWidth == 0. However I think it would be a less reliable technique than using a very wide glyph, because there are valid glyphs with zero width so it woudl get false positives for valid zero width glyphs (particularly U+200B and maybe other control characters?).