Skip to main content

Fonts

You can ask the browser to render a piece of text with a specific font. If the font doesn't exist, the browser will fall back to a default font.

By inspecting the width of the resulted text and comparing it to the known widths of default serif, sans-serif and monospace fonts, you get a couple of things:

  1. If the width of the rendered text differs from the default widths, then we know the system has the font.
  2. The widths of the same fonts differ on different systems

The way the fonts component works is that it uses the above method to inspect which fonts exist on the system. It then measures the widths of each font it finds. Some fonts have more than 50 different ways they render.

Example​

"fonts": {
    "Courier": 432.0703125,
    "Courier New": 432.0703125,
    "Lato": 465.26416015625,
    "Quicksand": 460.5841979980469,
    "Roboto": 448.83984375,
    "Roboto Condensed": 392.484375
},

Code​

Check out the implementation