CODEWITHSUNDEEP
javascripthtmlcanvasfonts
Dani
Dani

Reputation: 1250

reliably load Fonts into DOM for canvas elements

I'm not sure if this is different for every browser, I'm primarily developing for webkit.

Loading fonts for use in canvas elements is easy, using @font-face...except that it seems the actual font file isn't loaded until it is first used.

If i don't use the font in the HTML at all, this creates a problem in canvas elements, the first time a custom font is called it generates text in the default font....however subsequent attempts to use the font are fine and use the custom font referenced, as if it was loaded because of the original call.

Question 1, is this standard for all browsers? is the font downloaded if it is declared in the CSS? or at first use?

Is there a "best practice" for loading fonts into the DOM? This is for a graphic project, and I'd rather not declare every font possible in the CSS. I also only want to load fonts that are going to be used. Is there a better way to load fonts with JavaScript?

Upvotes: 0

Views: 318

Answers (2)

user1693593
user1693593

Reputation:

Question 1, is this standard for all browsers? is the font downloaded if it is declared in the CSS? or at first use?

Font loading is asynchronous which mean the font may still be loading in the background at the time you'd use canvas. For canvas this problem manifests right away as what you draw the first time is final.

For the DOM the content can be updated at a later point, although causing the infamous FOUT and FOIT, or Flash Of Unstyled Text and Flash Of Invisible Text. But for canvas the content need to be manually redrawn (or put on hold causing an inconvenient delay on the client side) when the font is ready to be used.

That being said - specific browsers may implement different loading strategies - and has, we would not always necessarily know which and when, and they would in any case have to take canvas into consideration so vendors would have to conform to similar strategies.

It's in general an "old" problem and not easy to get around depending on how old browsers you want to support. And the situation is less than ideal.

There are libraries that can help you get around the loading/readiness problem (have in mind that these libraries will add to the delay themselves) such as the mentioned Font Loader library from Google. You can futher improve speed by using CDN for the fonts and also storing fonts in localStorage.

These libraries are targeting more those who need path and metrics information, I'll include them in case they could prove useful to load fonts dynamically: Font.js and OpenType.js.

Also take a look at these articles for tips & tricks to improve font loading and for workarounds:

In relation to a font being available for canvas - I did provide an alternative option in this answer a while back, though this is more of a brute-force approach, but works specifically for canvas.

Upvotes: 1

markE
markE

Reputation: 105015

Yes, it would be nice if fonts had an 'onload' callback. But until then ...

... A common option is to use setTimeout to delay the app's start in order to give the font time to load. Of course, a delay that's too small will fail to give the font time to load and a delay that's too large will cause unnecessary delay.

... A better option is Google's webfont loader

... A Do-It-Yourself option is to continuously draw one font character to an in-memory canvas element until the opaque pixel count has changed. When the count changes, the font has been drawn on the in-memory canvas and is available for you to use. Example code for this technique can be found on this Stackoverflow Q&A.

Upvotes: 1

Related Questions