CanvasRenderingContext2D.font

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.

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

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

HTML

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

JavaScript

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

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

Result

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

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

• The interface defining this property: CanvasRenderingContext2D