Font-awesome: 5.0.x not working in JS Canvas. 4.7.x and lower works great

[nitzanwilnai]

I am unable to use Font Awesome 5 in Javascript canvas. Here are JSFiddles showing the problem:

Font awesome 4.7 - works great.
http://jsfiddle.net/V92Gn/5966/

Font awesome 5.0.8 - does not render
http://jsfiddle.net/futuzs1w/3/

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

I think you need to use the webfont version of FA5 to make it work: http://jsfiddle.net/tagliala/futuzs1w/4/

[nitzanwilnai]

your JS fiddle does not work either. Make sure you fork then make changes. Updates don't always work.

Also I should not that the issue also occurs on Mobile Safari and Mobile Chrome.

[tagliala]

Sorry, my fault.

http://jsfiddle.net/tagliala/futuzs1w/9/

please notice the different font name (and you still need to specify the font weight for solid style)

It doesn't work at the first load, but your example don't work either:

Docs:
https://fontawesome.com/how-to-use/upgrading-from-4#upgrade-steps
https://fontawesome.com/how-to-use/upgrading-from-4#icon-name-changes

[commanderjameson]

Here's an example for the free set with the font weight explicity defined (900) http://jsfiddle.net/84f1hqbo/ since the example above didn't need to have it for the font weight for the brands set

[tagliala]

I would use a javascript tool to load the webfont and then run a callback to draw the canvas. The first load doesn't work, perhaps the font hasn't been loaded at the moment that document.ready runs

https://github.com/typekit/webfontloader

[q-jack]

So there is no solution to make it work like it was in 4.7? (mentioned @nitzanwilnai )

[tagliala]

@q-jack please note that the webfont version of FA5 works just as 4.7

This issue is also present on FA 4.7, as per https://github.com/FortAwesome/Font-Awesome/issues/12498#issuecomment-370145142 and it does not depend on Font Awesome, as per http://jsfiddle.net/tagliala/84f1hqbo/15/

I've also tried to load the font via javascript and use a callback to draw the canvas when the font is loaded, but it doesn't work: http://jsfiddle.net/tagliala/84f1hqbo/5/

Closing here, because it seems something that we can't fix

[Enc-EE]

Hi,

I came up with the same problem and created a quick and dirty fix. (Without page reload)
See this JSFiddle https://jsfiddle.net/ryzsjedL/

You can copy my code and use loadFontawesomeFree() or loadFontawesomeBrands() functions like this:

loadFontawesomeFree().then(() => {
  var font = "900 34px 'Font Awesome 5 Free'"
  ctx.font = font;
  ctx.fillText("\uf118", 100, 100);
});

So how my solution works:

• It creates a temp canvas and draws two icons.
• It counts pixels of these Icons multiple times until the number of pixels is different (because until font is not loaded both icons would have this rectangle which has equal pixel count)
• Font is loaded :)

[afreepenguin]

Is there a reason this is marked as closed and cant fix?

[tagliala]

@afreepenguin

please take a look at https://github.com/FortAwesome/Font-Awesome/issues/12498#issuecomment-395789486