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

104.4k Views Asked by jdee At 09 April 2010 at 13:56

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?

Original Q&A

There are 4 best solutions below

miketaylr On 09 April 2010 at 18:26 BEST ANSWER

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

andyrandy On 12 April 2013 at 14:35

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.

just_a_kid_coder_123 On 14 August 2022 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

greentec On 26 November 2023 at 14:10

In my case, this worked.

Define the link with preload inside the head tag, and specify its font inside the style tag. When you draw it on the canvas, you should also specify the family name of the font and use functions like fillText().

<head>
    <link rel="preload" href="myfont.woff" as="font" type="font/woff" crossorigin>
    <style>
        .cls {
            font-family: 'myfont_familyname';
            src: url('myfont.woff') format('woff');
        }
    </style>
</head>

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

There are 4 best solutions below

Related Questions in HTML

Related Questions in CANVAS

Related Questions in FONTS

Related Questions in CUFON

Related Questions in TYPEFACE.JS

Trending Questions

Popular # Hahtags

Popular Questions