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?

Not sure, but maybe you need to wait until the font is loaded before running your JS? You could try putting your script in a 5 second timeout after the DOM loads and just see if it works (since the font will most likely load within 5 seconds after the DOM loads). Just a hypothesis — Oscar Godson, May 24 '11 at 22:36
Try just doing document.body.onload = function(){ setTimeout(function(){ /* all your code here */ },5000) }; This doesnt wait for the DOM to load, but its close — Oscar Godson, May 25 '11 at 02:59

score 3 · Answer 1 · answered Jan 24 '17 at 15:27

3

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

answered Jan 24 '17 at 15:27

JoeManFoo

321
2
11

score 3 · Answer 2 · edited Oct 19 '15 at 10:44

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.

score 2 · Answer 3 · answered Oct 18 '12 at 01:08

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).

score 1 · Answer 4 · edited May 23 '17 at 10:29

1

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

edited May 23 '17 at 10:29

Community

1
1

answered May 24 '11 at 22:36

tcnarss

565
4
22

So I tried adding a `
` with some text in it before all of my JS, to no avail. You can see it [here](http://aterrell-www.cs.wisc.edu/search/sample.php) - the text just above the white box is the correct font, the word "Computer" is sans-serif (as it should be), but the other text box is also sans-serif, but is defined as Officina.
– cryptic_star May 25 '11 at 00:56

score 0 · Answer 5 · edited May 23 '17 at 10:29

NOTE: Outdated as of 2016

Use this trick and bind an onerror event to an Image element.

Demo here: http://jsfiddle.net/g6LyK/ — works on the latest Chrome.

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow';
document.getElementsByTagName('head')[0].appendChild(link);

// Trick from https://stackoverflow.com/questions/2635814/
var image = new Image;
image.src = link.href;
image.onerror = function() {
    ctx.font = '50px "Vast Shadow"';
    ctx.textBaseline = 'top';
    ctx.fillText('Hello!', 20, 10);
};

@KarelBílek Confirmed, but I don't have the time to update at the moment. — a paid nerd, Oct 21 '13 at 22:42

score -7 · Answer 6 · edited May 02 '16 at 03:21

-7

How about try to put your url as a string:

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

context.font = "30px Officina";

edited May 02 '16 at 03:21

Ashish Ahuja

4,913
10
51
65

answered Feb 16 '13 at 03:38

Visal Chhourm

544
3
12

The statement "I'm not sure it work but just try it" immediately reveals the main problem with your question. – Luke Taylor May 01 '16 at 22:11

External Font on HTML5 Canvas

6 Answers6

NOTE: Outdated as of 2016

Linked