JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<p>The point of this demo is to show that "fontactive" fires before the font is ready for rendering. There's race conditions involved in this less-than-perfect test, so ideally GO INCOGNITO/STEALTH or wipe your cache to give the demo a better chance of working. Usually I see (1) and (3) the first time I test, then (1) (2) (3) when I try again.</p>
<p>I believe this is less of an issue in a normal DOM/CSS context. I think it will simply cause a delay in rendering of the font since browsers automatically keep the DOM, CSS, and font load state in sync. However, in the case of canvas, if you try to use fillText before the font is ready, you get zero output.

<canvas width='2000' height='350'/>

JavaScript

var canvas = $("canvas")[0], context = canvas.getContext('2d');
context.fontStyle = '100px serif';
context.fillText("(1) built-in font", 50, 50);

function show(font) {
    WebFont.load({
        google: { families: [ font ] },
        fontactive: function(family) {
          context.font = '100px '+font;
          context.fillText("(2) remote font", 50, 150);
          setTimeout(function() {
            context.font = '100px '+font;
            context.fillText("(3) remote font after delay", 50, 250);
          }, 1000);
        }
    })
}

show('Irish Grover');