This will help determine all fonts used on a given webpage. You can then use this to determine if your target font has been used.
const fontUnstack = (stack, size, style, weight) => {
if (typeof stack === "string")
stack = stack.match(/[^'",;\s][^'",;]*/g) || [];
for (const family of stack) {
if (document.fonts.check(style + ' ' + weight + ' ' + size + ' ' + family))
return family;
}
console.log('undetected font', fontStyle, fontWeight, fontSize, fontFamily, el);
return null;
};
const els = document.querySelectorAll('*');
let fonts = {};
for (const el of els) {
const computedStyles = [
window.getComputedStyle(el),
window.getComputedStyle(el, '::before'),
window.getComputedStyle(el, '::after')
];
for (const computedStyle of computedStyles) {
const fontFamily = computedStyle.getPropertyValue('font-family'),
fontSize = computedStyle.getPropertyValue('font-size'),
fontStyle = computedStyle.getPropertyValue('font-style'),
fontWeight = computedStyle.getPropertyValue('font-weight'),
usedFontFamily = fontUnstack(fontFamily, fontSize, fontStyle, fontWeight);
if (usedFontFamily && !fonts.hasOwnProperty(usedFontFamily))
fonts[usedFontFamily] = [];
if (fonts[usedFontFamily].indexOf(fontStyle + ', ' + fontWeight) === -1)
fonts[usedFontFamily].push(fontStyle + ', ' + fontWeight);
}
}
console.log(fonts);