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:
- Measure the size of text (0-9a-zA-Z) with 3 system fonts(monospace, serif, sans-serif)
- Measure the size of the same text with the custom font, fallback to system font if it's not available.
- 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.