Overview of the Code
Explore how to use the HTML5 Canvas API and JavaScript to detect whether a font is installed on your system. Understand how drawing text with default and target fonts and comparing their sizes can reveal font availability. Learn the nuances of this method and how to avoid false negatives with monospace fonts.
We'll cover the following...
As you can see, our code itself is pretty simple. You just need to know how to do some basic things with the HTML5 Canvas API. What may be less simple is the madness that our code represents and how it helps you figure out whether a font is available or not.
The way our code works is by taking advantage of the Canvas element and the APIs it provides for drawing and measuring the size of what you draw. First, I virtually draw two pieces of text.
One piece of text is drawn using a default monospace font:
The code for this looks as ...