要获得跨浏览器兼容性，您应该对嵌入字体使用CSS，如下所示：

@font-face {
    font-family: 'BankGothicMdBTMedium';
    src: url('bankgthd-webfont.eot');
    src: local('BankGothic Md BT'), local('BankGothicBTMedium'), url('bankgthd-webfont.woff') format('woff'), url('bankgthd-webfont.ttf') format('truetype'), url('bankgthd-webfont.svg#webfontNgZtDOtM') format('svg');
    font-weight: normal;
    font-style: normal;
}

注意：我在 * http://fontsquirrel.com * 中的某个位置获得了这些字体文件
这对我来说是有效的，但是我也在HTML标记中使用这种字体，所以也许一个解决方案（如果字体定义没有帮助）可以在一些隐藏的div中使用这种字体，当然我在加载正文后运行所有JS。

对于那些在2017年前后遇到这个问题的人来说，最好使用由Google和Typekit共同制作的Web字体加载器，位于：- https://github.com/typekit/webfontloader

你可以使用Google Web Font loader，但这对于很多用途来说都是相当沉重和/或烦人的。相反，我推荐Jennifer Simonds' FontDetect library，可以在GitHub上找到：
一个JavaScript类，可用于确定是否加载了webfont、元素正在使用哪种字体，或者对加载（或加载失败）的webfont做出React。

这是上一个问题，应该对您有所帮助。Drawing text to with @font-face does not work at the first time

注：截至2016年已过期

使用this trick并将onerror事件绑定到Image元素。
在这里演示：http://jsfiddle.net/g6LyK/-在最新的Chrome上工作。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://fonts.googleapis.com/css?family=Vast+Shadow';
document.getElementsByTagName('head')[0].appendChild(link);

// Trick from https://stackoverflow.com/questions/2635814/
var image = new Image;
image.src = link.href;
image.onerror = function() {
    ctx.font = '50px "Vast Shadow"';
    ctx.textBaseline = 'top';
    ctx.fillText('Hello!', 20, 10);
};

在画布中使用FontFace API之前，您可以使用它加载字体：

// new FontFace(familyName, fontSrc, descriptorOnly)
const myFont = new FontFace('My Font', 'url(https://myfont.woff2)');

myFont.load().then((font) => {
  document.fonts.add(font);

  console.log('Font loaded');
});

首先下载字体资源myfont.woff2。下载完成后，该字体将添加到文档的FontFaceSet中。
FontFace API的规范在撰写本文时还只是一个工作草案。请参阅此处的浏览器兼容性表。
然后，可以使用字体参数设置字体系列。

var ctx = document.getElementById('c').getContext('2d');
var kitty = new Image();
kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif';
kitty.onload = function(){
  ctx.drawImage(this, 0,0,this.width, this.height);
  ctx.font         = '68px KulminoituvaRegular';
  ctx.fillStyle = 'orangered';
  ctx.textBaseline = 'top';
  ctx.fillText  ('Keyboard Cat', 0, 270);
};

注意事项：
1.您可以使用“@font-face”CSS加载字体，但请记住，在画布上绘制之前，必须将字体加载到文档中。
1.你所有的字体和图像（实际上是所有资源）应该并且必须在同一个源或cros-origin内启用，否则大多数浏览器将拒绝网络请求。

试着把你的网址作为一个字符串：

@font-face{
 font-family:"Officina";
 src:url('OfficinaSansStd-Book.otf');
}

context.font = "30px Officina";