External Font on HTML5 Canvas

Question

I am completely baffled as to how to change the font I'm using when drawing text on a canvas. The following is the font I have defined in my CSS:

@font-face{
 font-family:"Officina";
 src:url(OfficinaSansStd-Book.otf);
}

Now in my HTML/JavaScript I'm tempted to say:

context.font = '30px "Officina"';

But this doesn't work. It works fine if I use a web available font (like Arial), and the Officina font shows up fine when I just write plain text directly to the webpage. What am I missing?

Answer 1

To get cross-browser compatibility you should use CSS for the embedded font like this:

@font-face {
    font-family: 'BankGothicMdBTMedium';
    src: url('bankgthd-webfont.eot');
    src: local('BankGothic Md BT'), local('BankGothicBTMedium'), url('bankgthd-webfont.woff') format('woff'), url('bankgthd-webfont.ttf') format('truetype'), url('bankgthd-webfont.svg#webfontNgZtDOtM') format('svg');
    font-weight: normal;
    font-style: normal;
}

Note: I got those font files somewhere at http://fontsquirrel.com

This is working for me, but I'm using this font also in HTML markup, so maybe a workaround (if the font-face definition doesn't help) can be using that font in some hidden div, of course I'm running all JS after body loads.

Answer 2

For folks coming to this question circa 2017 onwards it would be best to use the Web Font Loader that's co-produced by Google and Typekit located here: - https://github.com/typekit/webfontloader

Answer 3

You can use the Google Web Font loader, but that's rather heavyweight and/or annoying for many uses. Instead, I'll recommend Jennifer Simonds' FontDetect library, available on GitHub:

A JavaScript class you can use to determine whether a webfont got loaded, which font is being used by an element, or react to a webfont getting loaded (or failing to load).

Answer 4

This is previous question should help you. Drawing text to <canvas> with @font-face does not work at the first time