Safari can't display embedded font in canvas

On a Mac, Safari shows the wrong font for text drawn in an html canvas element when the font is embedded using @font-fase and a base64 data URI. The embedded font shows up fine in the body of the html (i.e. not in a canvas). Using the embedded font in a canvas element works fine with Chrome and Firefox.

On an iOS device, the embedded (base64 data URI) font shows up fine in the html body, but not in a canvas element on all three browsers - Safari, Chrome and Firefox. Is there anything that I can do to fix this? Thanks.

Replies

Has there been an update on this? Facing the same problem in 2023. It seems that the canvas does not support webfonts. Webfont is rendered fine on normal webpage though. Just not in the canvas...