font property

Gets or sets the current font for the context.

This property is read/write.

HTML Canvas 2D Context, Section 11Internet Explorer 9



HRESULT put_font(

HRESULT get_font(
  [out, retval] 

Property values

Type: string

The current font description.

Standards information


The font string can consist of any CSS font and is analogous to the CSS font property. The default font for a canvas context is 10px sans-serif. Values that are not CSS font values are ignored.


The following example uses ICanvasRenderingContext2D::font, along with ICanvasRenderingContext2D::strokeText and ICanvasRenderingContext2D::fillText.

  <title>Stroke and Fill Text</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              ctx.font = "italic 200 36px/2 Unknown Font, sans-serif";
              ctx.strokeStyle = "blue"; // set stroke color to blue
              ctx.fillStyle = "red";  // set fill color to red
              ctx.lineWidth = "3";  //  set stroke width to 3pmx
              var i;
              for (i = 0; i < 450; i += 45) {
                  ctx.strokeText("Hello World", i, i);
                  ctx.fillText("Hello World", i, i);
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500" border="1">Canvas not supported in this mode or browser.</canvas>