Grab the Code
We'll cover the following...
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 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 ...