src/RemoteFont.js
function hasFontLoaded (window, fontName) {
    var testSize = 16
    if (!fontTestElement) {
        fontTestElement = window.document.createElement('canvas')
        fontTestElement.width = testSize
        fontTestElement.height = testSize
        fontTestElement.style.display = 'none'

        ctx = fontTestElement.getContext('2d')
        window.document.body.appendChild(fontTestElement)
    }

    fontTestElement.width = testSize
    ctx.fillStyle = 'rgba(0, 0, 0, 0)'
    ctx.fillRect(0, 0, testSize, testSize)
    ctx.font = testSize + "px __cc2d_" + fontName
    ctx.fillStyle = 'rgba(255, 255, 255, 1)'
    ctx.fillText("M", 0, testSize);

    var pixels = ctx.getImageData(0, 0, testSize, testSize).data

    for (var i = 0; i < testSize * testSize; i++) {
        if (pixels[i * 4] != 0) {
            fontTestElement.parentNode.removeChild(fontTestElement)
            fontTestElement = null
            return true
        }
    }

    return false
}
function hasFontLoaded (window, fontName) {
    var testSize = 16
    if (!fontTestElement) {
        fontTestElement = window.document.createElement('canvas')
        fontTestElement.width = testSize
        fontTestElement.height = testSize
        fontTestElement.style.display = 'none'

        ctx = fontTestElement.getContext('2d')
        window.document.body.appendChild(fontTestElement)
    }

    fontTestElement.width = testSize
    ctx.fillStyle = 'rgba(0, 0, 0, 0)'
    ctx.fillRect(0, 0, testSize, testSize)
    ctx.font = testSize + "px __cc2d_" + fontName
    ctx.fillStyle = 'rgba(255, 255, 255, 1)'
    ctx.fillText("M", 0, testSize);

    var pixels = ctx.getImageData(0, 0, testSize, testSize).data

    for (var i = 0; i < testSize * testSize; i++) {
        if (pixels[i * 4] != 0) {
            fontTestElement.parentNode.removeChild(fontTestElement)
            fontTestElement = null
            return true
        }
    }

    return false
}
function hasFontLoaded ( window , fontName ) { var testSize = 16 if ( ! fontTestElement ) { fontTestElement = window . document . createElement ( 'canvas' ) fontTestElement . width = testSize fontTestElement . height = testSize fontTestElement . style . display = 'none' ctx = fontTestElement . getContext ( '2d' ) window . document . body . appendChild ( fontTestElement ) } fontTestElement . width = testSize ctx . fillStyle = 'rgba(0, 0, 0, 0)' ctx . fillRect ( 0 , 0 , testSize , testSize ) ctx . font = testSize + "px __cc2d_" + fontName ctx . fillStyle = 'rgba(255, 255, 255, 1)' ctx . fillText ( "M" , 0 , testSize ) ; var pixels = ctx . getImageData ( 0 , 0 , testSize , testSize ) . data for ( var i = 0 ; i < testSize * testSize ; i ++ ) { if ( pixels [ i * 4 ] != 0 ) { fontTestElement . parentNode . removeChild ( fontTestElement ) fontTestElement = null return true } } return false }
Very crude way to test for when a font has loaded

While a font is loading they will be drawn as blank onto a canvas.
This function  creates a small canvas and tests the pixels to see if the
given font draws. If it does then we can assume the font loaded.
Very crude way to test for when a font has loaded