A JavaScript function to test whether a font is supported or not

detectFont.ts

/**
 * Usage:
 *
 *     detectFont('arial') // true
 */
function detectFont(fontName: string) : boolean {
    const canvas = window.document.createElement('canvas')
    const context = canvas.getContext('2d')
    const text = 'i' // this text has a different width for monospace and sans-serif

    context.font = `16px ${fontName}, monospace`
    const width1 = context.measureText(text).width

    context.font = `16px ${fontName}, sans-serif`
    const width2 = context.measureText(text).width

    // if fontName is supported and is applied, the widths will be the same
    // otherwise, we get the two widths of monospace and sans-serif, which differ from each other
    return width1 === width2        
}