我正在尝试使用很棒的字体。我可以动态加载到卡上，但我被困在如何将它放入我的displayImage函数中？

function displayImage() {
  // 创建一个新的Canvas元素
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  // 加载字体文件
  var fontUrl = 'https://example.com/font.ttf';
  var font = new FontFace('CustomFont', 'url(' + fontUrl + ')');

  // 使用Promise来处理字体加载完成后的回调
  font.load().then(function(loadedFont) {
    // 将加载的字体应用到Canvas上下文中
    ctx.font = '30px CustomFont';

    // 绘制图像
    ctx.fillText('Hello, World!', 50, 50);

    // 将Canvas添加到页面中
    document.body.appendChild(canvas);
  }).catch(function(error) {
    console.log('字体加载失败：', error);
  });
}

displayImage();