これは私のコードであるキャンバス

Question

でGoogleフォントを使用することができません：

img.onload = function() { 

    ctx.drawImage(img, 0, 0, 600, 480); 

    ctx.lineWidth = 4; 
    ctx.font = "3em 'Lato'"; 
    ctx.strokeStyle = 'black'; 
    ctx.fillStyle = 'white'; 

    var text = 'Custom Text'; 
    text = text.toUpperCase(); 
    x = canvas.width/2; 
    y = canvas.height - canvas.height/4.5; 
    ctx.strokeText(text, x, y); 
    ctx.fillText(text, x, y); 
} 

キャンバス上のフォントがラトではありません。他の回答を読んだ後、私は他のHTML要素でそれを使用していないためかもしれないと思ったが、Latoフォントを使用する見出しも追加した。この問題を引き起こす原因は他にありますか？

Answer 1

はキャンバスを使用して開始する前にこのコードを使用してみてください：

var f = new FontFace("Lato", /* url */); 
    f.load().then(function() { 
    // Ready to use the font in a canvas context 
}); 

から：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font

Answer 2

この

ctx.font = "3em Lato"; 

Answer 3

を試してみて、私はあなただけで不正な形式のfont文字列を持っているかもしれないと思います。フォントファミリの引用符を削除してみてください。

ctx.font = "3em Lato";