How to use custom fonts for creating text with Canvas2D?

Questions
,
1

The title says it all. The “40px Arial” format to define the size of the font rendering applies only to system fonts. So should I quit trying with off-screen canvas, or am I missing something?

I have also posted about it on stackexchange with NO working solution so far:
StackExchange

2

The approach with the CSS font face rule mentioned at stackoverflow seems to work. An when using CSS font loading API (available in Chrome and FF), you can easily ensure to only render if the font has actually loaded.

http://jsfiddle.net/0couqp27/9/

2 Likes
3

Thanks @Mugen87, your simple font waiting suggestion was key! The previous approach did not work in my case (where I’m not pre-defining canvas and span on HTML) and this one needed a couple of additional things to work. I’ve posted an answer in stackechange:
stackexchange answer

1 Like