Reports

Sei que é um post de 14 anos atrás, mas ainda é um dúvida frequente, então aqui está a minha contribuição.

Crie um arquivo "fonts.js" (o nome do arquivo não é importante) em algum local do seu projeto e o inclua na tag da sua página principal. Este é o arquivo onde você irá carregar suas fontes.

image example 01

Entre no arquivo e coloque o seguinte código:

const fonts = [
  new FontFace('myFont', 'url(path/of/your/font.ttf)')
]
    
fonts.forEach(item => item.load().then(font => document.fonts.add(font)))

No objeto const fonts = [ ] você pode colocar todas as suas fontes usando o new FontFace(), onde, no primeiro parâmetro você irá colocar o nome da família da fonte e no segundo parâmetro o caminho até a fonte.

A linha de baixo

fonts.forEach(item => item.load().then(font => document.fonts.add(font)))

é responsável por carregar as fontes que estão dentro do objeto "fonts" no document, meio que a parte nativa da página.

Caso queira adicionar mais fontes, basta criar uma nova FontFace dentro do objeto "fonts", dessa forma:

const fonts = [
  new FontFace('myFont', 'url(path/of/your/font.ttf)'),
  new FontFace('myFont2', 'url(path/of/your/font2.ttf)'),
  new FontFace('myFont3', 'url(path/of/your/font3.ttf)')
]
    
fonts.forEach(item => item.load().then(font => document.fonts.add(font)))

Pronto! Suas fontes estão carregadas. Para usar em seus textos usando canvas js, basta chamar o nome da família da fonte.

ctx.font = "16px myFont";
ctx.fillStyle = "black";
ctx.fillText("Hello World!", 20, 30);

Espero ter ajudado.

79297968