1

I've been wrestling with this a couple of days to no avail but it seems like it should be a simple thing.

I am unable to have Google Fonts display properly the first time a canvas is drawn. Subsequent display of the fonts is OK. It certainly seems to be related to the timing of loading the font.

I have tried most of the proposed fixes listed on Drawing text to <canvas> with @font-face does not work at the first time but have been unsuccessful.

Here is my jsfiddle incorporating most of the fixes from the above link: http://jsfiddle.net/HatHead/GcxQ9/23/

When you load the jsfiddle, you'll see the canvas title and text are default fonts. When you press the Run button, the fonts will update to the fonts as specified by the js code.

Here is the code from the above jsfiddle:

HTML:

<!-- you need to empty your browser cache and do a hard reload EVERYTIME to test this otherwise it will appear to working when, in fact, it 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:

// do the 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 with the milliseconds delay to find the threshold - don't forget to empty your browser cache and do a hard reload!
setTimeout(WriteCanvasText, 0);

function WriteCanvasText() {
    // write some text to the 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 is some text on the canvas...", 5, 180);
}

It works using a delay but this is a bad solution.

Any ideas to resolve this issue? Anyone beat it before? I would hate to give in and put in an image in place of the text for the first load.

Many thanks stackoverflow'ers!

Community
  • 1
  • 1
HatHead
  • 33
  • 6
  • answer : http://stackoverflow.com/questions/2756575/drawing-text-to-canvas-with-font-face-does-not-work-at-the-first-time – Ivan Chernykh May 06 '13 at 09:05
  • Thanks Chemiv but unfortunately, as I note in my question, and also in the actual thread itself when read thoroughly, none of the suggested fixes in that thread resolve the issue. My question incorporates the suggested fixes but, however, they do not fix the problem. If it's useful to the community, I will post the above code there as a demonstration. – HatHead May 06 '13 at 19:22

2 Answers2

0

I gave in and, for the very first load of the page, I used an image of the text with the font-face fonts in place of the actual text while positioning the actual text with the font-face fonts outside the display area of the canvas.

All subsequent use of the fonts on the canvas displayed properly.

My workaround code is baked into my website however I'm happy to create a jsfiddle of a working model if anyone needs.

HatHead
  • 33
  • 6
0

If you goto your JS Fiddle and have it wait for onDomready instead of onLoad, the canvas appears to get it right the first time.

user2970132
  • 1