How can I use custom fonts in an HTML5 Canvas element?

Question

I've looked at things like Cufon and typeface.js but they seem to be SIFR alternatives and don't allow you to set freeform coordinates and draw custom type onto a <canvas>

Anyone got any ideas?

score 108 · Accepted Answer · edited Apr 06 '19 at 10:10

108

I've thrown together a simple demo on jsfiddle here showing how to do this with @font-face: http://jsfiddle.net/zMKge/

Opera also has a simple tutorial on using <canvas>, including the text API.

CSS:

@font-face {
    font-family: 'KulminoituvaRegular';
    src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}

Javascript:

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);
};

edited Apr 06 '19 at 10:10

Neuron

5,141
5
38
59

answered Apr 09 '10 at 18:26

miketaylr

1,936
3
15
14

10

Be aware of this issue, though : http://stackoverflow.com/questions/2756575/drawing-text-to-canvas-with-font-face-does-not-work-at-the-first-time – Alsciende Apr 13 '11 at 09:47
4

The Firefox issue is because the browser is very strict on its same-origin policy. Stars have to align and *image, font, and webpage must ALL be on the same domain* – Chris Bosco May 01 '12 at 03:02
This doesn't work in Chrome 21, but works on FF 7, 12 and 15. All on Windows 7. – Belladonna Sep 16 '12 at 02:23
This doesn't work (reliably) on the BlackBerry Playbook browser. At best it works when refreshing the page; sometimes the font doesn't show at all. – Ted Hopp Jan 04 '13 at 20:15
2

This does not work at all on Safari 6.0.5 or Chrome 27.0.1453.116, both running on OS X 10.8.4. Safari's behavior when an unavailable font is used is to display nothing; Chrome uses Arial. – void-pointer Jun 22 '13 at 03:24
7

I couldn't get that JSFiddle to work so I updated it using a Google Webfont. http://jsfiddle.net/zMKge/2171/ – Francisc0 Jul 07 '15 at 14:14

score 7 · Answer 2 · edited May 23 '17 at 12:00

7

I have just answered this question here: Preload font HTML5, JS, Kinetic.js?

The essential part:

@font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

It should not matter if you are using KineticJS or not, the only difference without KineticJS is that you would possibly create the Canvas element directly with HTML instead of using a div layer as container. After all KineticJS just creates a normal Canvas element in that container.

edited May 23 '17 at 12:00

Community

1
1

answered Apr 12 '13 at 14:35

andyrandy

72,880
8
113
130

1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Josh Burgess Jan 05 '15 at 16:54
2

in that case i´d say it´s ok, because it links to stackoverflow ;) - but i will include the essential part. – andyrandy Jan 05 '15 at 17:19

score 2 · Answer 3 · answered Aug 14 '22 at 03:25

an answer from 3 years into the future lol

you can user javascript's new FontFace(family, font, descriptor)

https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace

where family is the name of the font, font is a url or ttf binary data, and descriptor is css elements.

then use ctx.fillText() to create the text

How can I use custom fonts in an HTML5 Canvas element?

3 Answers3

Linked