javascript - Google fonts won't display on canvas first time -

i've been wrestling couple of days no avail seems should simple thing.

i unable have google fonts display first time canvas drawn. subsequent display of fonts ok. seems related timing of loading font.

i have tried of proposed fixes listed on drawing text <canvas> @font-face not work @ first time have been unsuccessful.

here jsfiddle incorporating of fixes above link: http://jsfiddle.net/hathead/gcxq9/23/

when load jsfiddle, you'll see canvas title , text default fonts. when press run button, fonts update fonts specified js code.

here code above jsfiddle:

html:

<!-- need empty browser cache , hard reload everytime test otherwise appear working when, in fact, isn't -->  <h1>title font</h1>  <p>paragraph font...</p> <canvas id="mycanvas" width="740" height="400"></canvas> 

css:

@import url(http://fonts.googleapis.com/css?family=architects+daughter);  @import url(http://fonts.googleapis.com/css?family=rock+salt);  canvas {     font-family:'rock salt', 'architects daughter' } .wf-loading p {     font-family: serif } .wf-inactive p {     font-family: serif } .wf-active p {     font-family:'architects daughter', serif;     font-size: 24px;     font-weight: bold; } .wf-loading h1 {     font-family: serif;     font-weight: 400;     font-size: 42px } .wf-inactive h1 {     font-family: serif;     font-weight: 400;     font-size: 42px } .wf-active h1 {     font-family:'rock salt', serif;     font-weight: 400;     font-size: 42px; } 

js:

// google font loader stuff.... webfontconfig = {     google: {         families: ['architects daughter', 'rock salt']     } }; (function () {     var wf = document.createelement('script');     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +         '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';     wf.type = 'text/javascript';     wf.async = 'true';     var s = document.getelementsbytagname('script')[0];     s.parentnode.insertbefore(wf, s); })();  //play milliseconds delay find threshold - don't forget empty browser cache , hard reload! settimeout(writecanvastext, 0);  function writecanvastext() {     // write text canvas     var canvas = document.getelementbyid("mycanvas");     var context = canvas.getcontext("2d");     context.font = "normal" + " " + "normal" + " " + "bold" + " " + "42px" + " " + "rock salt";     context.fillstyle = "#d50";     context.filltext("canvas title", 5, 100);     context.font = "normal" + " " + "normal" + " " + "bold" + " " + "24px" + " " + "architects daughter";     context.filltext("here text on canvas...", 5, 180); } 

it works using delay bad solution.

any ideas resolve issue? beat before? hate give in , put in image in place of text first load.

many stackoverflow'ers!

i gave in and, first load of page, used image of text font-face fonts in place of actual text while positioning actual text font-face fonts outside display area of canvas.

all subsequent use of fonts on canvas displayed properly.

my workaround code baked website i'm happy create jsfiddle of working model if needs.