I am using .fillText() on a canvas, the text of which I want to be in a Google Web Font (Oswald, in my case).

When the page loads, the text is drawn to canvas before the font has loaded, but obviously once the font loads the text on the canvas doesn't update, because it has already been drawn as a bitmap.

How can I delay this text drawing until after the Web Font has loaded? A rectangle is also drawn to the canvas which I would still like to draw immediately on $(document).ready().

I should say that I would like to delay the .fillText() instead of overwriting the default font, since it is a design-oriented application, and the FOUT reflects negatively on the aesthetics.

I am using .fillText() on a canvas, the text of which I want to be in a Google Web Font (Oswald, in my case).

When the page loads, the text is drawn to canvas before the font has loaded, but obviously once the font loads the text on the canvas doesn't update, because it has already been drawn as a bitmap.

How can I delay this text drawing until after the Web Font has loaded? A rectangle is also drawn to the canvas which I would still like to draw immediately on $(document).ready().

I should say that I would like to delay the .fillText() instead of overwriting the default font, since it is a design-oriented application, and the FOUT reflects negatively on the aesthetics.

• javascript
• canvas
• google-webfonts

1 Answer 1

Here's an example of how to use TypeKit's WebFontLoader to allow fonts time to load before using them:

// load google font == Monoton
WebFontConfig = {
  google:{ families: ['Monoton'] },
  active: function(){start();},
};
(function(){
  var wf = document.createElement("script");
  wf.src = 'https://ajax.googleapis./ajax/libs/webfont/1.5.10/webfont.js';
  wf.async = 'true';
  document.head.appendChild(wf);
})();


var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


function start(){
  ctx.font = '50px Monoton';
  ctx.textBaseline = 'top';
  ctx.fillText('No', 20, 10);
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>