CanvasRenderingContext2D: font property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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
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
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.
js
let f = new FontFace("test", "url(x)");
f.load().then(() => {
// Ready to use the font in a canvas context
});
Specifications
Specification |
---|
HTML # dom-context-2d-font-dev |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
See also
- The interface defining this property:
CanvasRenderingContext2D