0

I need to use Myriad Pro for all text drawn on my canvas. I am loading the font through CSS like this: 

@font-face { font-family: MyriadProRegular; src: url('/fonts/MyriadPro-Regular.otf'); }

and trying to set it for my canvas like this:

this.context.font = "16pt MyriadProRegular";

the problem is that the font is not being assigned - all my text gets drawn correctly, but with the wrong font. The assingment does work when I change "MyriadProRegular" to any standard web font though.

I have tried all solutions and suggestions on these two posts: HTML 5 canvas font being ignored, External Font on HTML5 Canvas, but none of them have helped, and it doesn't seem that any new answers will come to those old posts.

I know there is no problem with my css or the font itself - my canvas gets created through JS after the user fills out a form and pushes start, and that form uses Myriad Pro just fine.

How can I get the canvas to use my font?

Community
  • 1
  • 1
Cbas
  • 6,003
  • 11
  • 56
  • 87

1 Answers1

0

I'm pretty sure you need to upload your font file to your server. Then with the font declaration, it should work.

Jon
  • 976
  • 8
  • 23
  • It is uploaded - the font is working fine on the form preceding the canvas – Cbas Aug 14 '12 at 06:56
  • I put this project aside for a few months and when I came back to it, I found that the file was uploaded but I wasn't calling the proper path in my code. – Cbas Oct 04 '12 at 19:00