Detecting font with JS

There’re different methods on the web to detect if a font is available.

They all have their goods and bads, and here’s my version of combining the goods:

The idea is simple:

  1. Measure the size of text (0-9a-zA-Z) with 3 system fonts(monospace, serif, sans-serif)
  2. Measure the size of the same text with the custom font, fallback to system font if it's not available.
  3. Compare their size, custom font is not available if their size is not the same.
Canvas is used instead of span because it's much faster.