Canvas font Property: Set Font Size, Family and Style
The Canvas font property sets the current text style for fillText(), strokeText(), and text measurement. Its value uses CSS font shorthand syntax. The default is 10px sans-serif.
Basic Canvas font example Top ↑
ctx.font = 'bold 32px Arial, sans-serif';
ctx.fillText('plus2net.com', 30, 70);Interactive font demo Top ↑
CSS font shorthand rules Top ↑
At minimum, include a font size and family. Optional weight, style, stretch, and other shorthand components follow CSS font syntax.
ctx.font = '18px sans-serif';
ctx.font = 'italic 24px Georgia, serif';
ctx.font = '700 36px system-ui, sans-serif';Load web fonts before drawing Top ↑
If Canvas draws before a web font finishes loading, the browser may render fallback glyphs and Canvas will not automatically repaint them when the font arrives. Wait for the required font before drawing.
document.fonts.ready.then(() => {
ctx.font = '32px MyWebFont, sans-serif';
ctx.fillText('Loaded font', 20, 60);
});Font and measureText() Top ↑
Set font before calling measureText(), because measurements depend on the active text style.
Frequently asked questions Top ↑
What is the default Canvas font? Top ↑
The default is 10px sans-serif.
Does ctx.font use CSS syntax? Top ↑
Yes. It is parsed using CSS font shorthand syntax.
Why is my custom Canvas font not appearing? Top ↑
The font may not have finished loading when the drawing command ran. Wait for the font and then draw.
Does changing ctx.font update text already drawn? Top ↑
No. Canvas is immediate-mode drawing; repaint the text after changing the font.
Does ctx.font affect measureText()? Top ↑
Yes. Text measurements use the current font and related text settings.
Related Canvas text tutorials Top ↑
fillText() | strokeText() | textAlign | textBaseline | CSS generator | Canvas tutorial
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
