Grab the Code

The code for detecting whether a particular font is available is shown below:

Press + to interact
//
// Call this function and pass in the name of the font you want to check for availability.
//
function doesFontExist(fontName) {
// creating our in-memory Canvas element where the magic happens
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
// the text whose final pixel size I want to measure
var text = "abcdefghijklmnopqrstuvwxyz0123456789";
// specifying the baseline font
context.font = "72px monospace";
// checking the size of the baseline text
var baselineSize = context.measureText(text).width;
// specifying the font whose existence we want to check
context.font = "72px '" + fontName + "', monospace";
// checking the size of the font we want to check
var newSize = context.measureText(text).width;
// removing the Canvas element we created
delete canvas;
//
// If the size of the two text instances is the same, the font does not exist because it is being rendered
// using the default sans-serif font
//
if (newSize == baselineSize) {
return false;
} else {
return true;
}
}

Add this code to your page (or to a script file) and simply call the doesFontExist function and pass in the name of the font you are looking for. Below is an example:

Press + to interact
doesFontExist("Comic Sans MS");

That’s all there is to it. You can see a fully working example at the Does This Font Exist page - the same one the above example is based on.