FontFace API无法正常工作，加载谷歌字体报错求解决方案

你用FontFace加载Google Fonts时出错，是因为FontFace构造函数的第二个参数需要字体文件（如woff2/ttf）的直接URL，但你传入的是Google Fonts的CSS链接——这个链接返回的是包含字体声明的样式表，不是字体二进制资源，所以触发了网络错误。

方案1：直接加载字体文件（使用FontFace） #

先从Google Fonts的CSS中提取实际的字体文件URL，再传入FontFace：

(async function () {
  try {
    // 从Google Fonts CSS中提取的Source Code Pro 500字重woff2文件URL
    const font = new FontFace(
      "Source Code Pro",
      `url(https://fonts.gstatic.com/s/sourcecodepro/v23/HI_SiYsKILxRpg3hIP6sJ7fM7PqlM-vWjMY.woff2) format('woff2')`
    );
    const loadedFont = await font.load();
    document.fonts.add(loadedFont);
    // 验证：设置页面字体
    document.body.style.fontFamily = "Source Code Pro, monospace";
  } catch (err) {
    console.error("字体加载失败:", err);
  }
})();

注：字体文件URL可能随Google Fonts版本更新变化，若失效可打开对应CSS链接，从返回的@font-face规则中提取最新URL。

方案2：动态插入link标签（官方推荐方式） #

这是更简单可靠的方法，直接加载Google Fonts提供的样式表，浏览器会自动处理字体加载：

(function() {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500&display=swap';
  link.onload = () => {
    console.log("字体加载完成");
    document.body.style.fontFamily = "Source Code Pro, monospace";
  };
  link.onerror = (err) => {
    console.error("样式表加载失败:", err);
  };
  document.head.appendChild(link);
})();

内容的提问来源于stack exchange，提问作者Pradeep Bisht