Canvas font Property

Watch a demo of different values of the font property.

Or click a specific value to see the result:

font = 'normal 30px Arial';
font = 'bold 30px Arial';
font = 'bolder 30px Arial';
font = 'lighter 30px Arial';
font = '100 30px Arial';
font = '200 30px Arial';
font = '300 30px Arial';
font = '400 30px Arial';
font = '500 30px Arial';
font = '600 30px Arial';
font = '700 30px Arial';
font = '800 30px Arial';
font = '900 30px Arial';
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
your browser does not support the canvas tag
const c = document.getElementById('myCanvas');
const ctx = c.getContext('2d');
ctx.font='bold 30px Arial';
ctx.fillText('Hello World',10,30);

Play more with the code in our Tryit yourself editor: Try it Yourself ❯