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 string 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(() => {
  // Ready to use the font in a canvas context
});

• The interface defining this property: CanvasRenderingContext2D