How to use other than default sans seriff family on HTML canvas?

Asked Mar 09 '20 at 04:20

Active Mar 09 '20 at 07:32

Viewed 208 times

Is there any way to use other font-family in HTML canvas?

  ctx.fillStyle = '#FFF';
  ctx.font = '43px Arial';
  ctx.textAlign = 'center';
  ctx.fillText(name, 220, 515);

This is using Arial and it works as it's in the sans-serif family, but I've tried by using other family and it fails.

I've tried to change Arial to Segoe-UI font like this:

ctx.font = '43px Segoe-UI';

But still no effect, how can I use segoe font on html canvas? If there's no way, is it proper if I save that text into images and import as images into the canvas?

edited Mar 09 '20 at 07:32

cpru

asked Mar 09 '20 at 04:20

Khairul Habib

try `fontFamily` – ariel Mar 09 '20 at 05:12
May help: https://stackoverflow.com/questions/2608022/how-can-i-use-custom-fonts-in-an-html5-canvas-element – dale landry Mar 09 '20 at 05:44
Does your system have that Segoe-UI font installed locally? – Kaiido Mar 09 '20 at 10:00
ya already installed and used for other text in the system already @Kaiido – Khairul Habib Mar 10 '20 at 01:03
So in [this fiddle](https://jsfiddle.net/zj6unh2d/), you can see the text using that font? – Kaiido Mar 10 '20 at 01:08
ya i can see that – Khairul Habib Mar 10 '20 at 06:21

How to use other than default sans seriff family on HTML canvas?

0 Answers0