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

339
3
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 2 · Answer 4 · edited May 23 '17 at 10:29

2

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

585
5
23

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 1 · Answer 5 · answered Nov 23 '22 at 13:54

You can load fonts with the FontFace API before using it in the canvas:

// new FontFace(familyName, fontSrc, descriptorOnly)
const myFont = new FontFace('My Font', 'url(https://myfont.woff2)');

myFont.load().then((font) => {
  document.fonts.add(font);

  console.log('Font loaded');
});

The font resource myfont.woff2 is first downloaded. Once the download completes, the font is added to the document's FontFaceSet.

The specification of the FontFace API is a working draft at the time of this writing. See browser compatibility table here.

Then, you can use the font parameter to set your font family.

var ctx = document.getElementById('c').getContext('2d');
var kitty = new Image();
kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif';
kitty.onload = function(){
  ctx.drawImage(this, 0,0,this.width, this.height);
  ctx.font         = '68px KulminoituvaRegular';
  ctx.fillStyle = 'orangered';
  ctx.textBaseline = 'top';
  ctx.fillText  ('Keyboard Cat', 0, 270);
};

Note:

You can simply load your font using "@font-face" CSS, but remember, before you draw on canvas, your font must be loaded to the document.
All of your fonts and images (actually all resources) should be and must be within the same origin or cors-origin enabled, otherwise most of the browser will reject the network request.

score 0 · Answer 6 · 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 7 · 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

Box Box Box Box

5,094
10
49
67

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

7 Answers7

NOTE: Outdated as of 2016

Linked