It's essential to utilize this specific function.
By utilizing canvas, we can determine if a font is supported. This involves drawing both the detected font and the default font on the canvas, then comparing their dot matrix representations for any differences.
const checkFontSupport = (fontFamily) => {
if (typeof fontFamily != "string") {
return false;
}
const defaultFontFamily = "Arial";
if (fontFamily.toLowerCase() == defaultFontFamily.toLowerCase()) {
return true;
}
const defaultLetter = "a";
const defaultFontSize = 100;
const width = 100,
height = 100;
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d", {
willReadFrequently: true,
});
canvas.width = width;
canvas.height = height;
context.textAlign = "center";
context.fillStyle = "black";
context.textBaseline = "middle";
const getFontData = function (fontFamily) {
context.clearRect(0, 0, width, height);
context.font =
defaultFontSize + "px " + fontFamily + ", " + defaultFontFamily;
context.fillText(defaultLetter, width / 2, height / 2);
const data = context.getImageData(0, 0, width, height).data;
return [].slice.call(data).filter(function (value) {
return value != 0;
});
};
return getFontData(defaultFontFamily).join("") !== getFontData(fontFamily).join("")
};
Moving on! Let's
const bodyComputedStyle = window.getComputedStyle(document.body);
const bodyFontFamily = bodyComputedStyle.fontFamily;
bodyFontFamily.split(', ').find(e => {
return checkFontSupport(e)
})
There you have it! All set!