Grab the Code
The code for detecting whether a particular font is available is shown below:
//// 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 happensvar canvas = document.createElement("canvas");var context = canvas.getContext("2d");// the text whose final pixel size I want to measurevar text = "abcdefghijklmnopqrstuvwxyz0123456789";// specifying the baseline fontcontext.font = "72px monospace";// checking the size of the baseline textvar baselineSize = context.measureText(text).width;// specifying the font whose existence we want to checkcontext.font = "72px '" + fontName + "', monospace";// checking the size of the font we want to checkvar newSize = context.measureText(text).width;// removing the Canvas element we createddelete 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:
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.