The CanvasRenderingContext2D.font property of the Canvas 2D API specifies the current text style to use when drawing text. This string uses the same syntax as the CSS font specifier.


ctx.font = value;


A DOMString parsed as CSS font value. The default font is 10px sans-serif.


Using a custom font

In this example we use the font property to specify a custom font weight, size, and family.


<canvas id="canvas"></canvas>


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

ctx.font = 'bold 48px serif';
ctx.strokeText('Hello world', 50, 100);


Loading fonts with the CSS Font Loading API

With the help of the FontFace API, you can explicitly load fonts before using them in a canvas.

let f = new FontFace('test', 'url(x)');

f.load().then(function() {
  // Ready to use the font in a canvas context


Browser compatibility

BCD tables only load in the browser

Gecko-specific notes

  • In Gecko-based browsers, such as Firefox, a non-standard and deprecated property ctx.mozTextStyle is implemented besides this property. Use ctx.font instead.
  • In Gecko, when setting a system font as the value of a canvas 2D context's font (e.g., menu), getting the font value used to fail to return the expected font (it returns nothing). This is fixed in Firefox's Quantum/Stylo parallel CSS engine, released in Firefox 57 (bug 1374885).

See also