CanvasRenderingContext2D: font property

Baseline 2025
Newly available

Since March 2025 , this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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.

Value

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

Examples

Using a custom font

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

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

JavaScript


js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "bold 48px serif";
ctx.strokeText("Hello world", 50, 100);

Result