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.


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


HTML Standard
# dom-context-2d-font-dev

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 (Firefox bug 1374885).

See also