如何用纯JavaScript加载字体？遇解码错误求原生JS解决方案

你当前的代码尝试用FontFace加载Google Fonts的CSS链接，但控制台报错Failed to decode downloaded font，核心原因是：FontFace API需要直接传入字体文件（如woff2）的URL，而非Google Fonts返回的CSS样式表链接——那个链接返回的是包含@font-face规则的文本CSS，并非可直接解码的字体二进制数据。

纯JavaScript解决方案 #

需要先获取Google Fonts的CSS内容，从中提取实际的字体文件URL，再用这个URL创建FontFace实例完成加载：

// 1. 获取Google Fonts的CSS内容，提取字体文件URL
fetch('https://fonts.googleapis.com/css2?family=VT323&display=swap')
  .then(response => response.text())
  .then(cssText => {
    // 正则匹配CSS中的字体文件URL
    const fontUrlMatch = cssText.match(/url\((https:\/\/[^)]+)\)/);
    if (!fontUrlMatch) {
      throw new Error('无法提取字体文件URL');
    }
    const fontFileUrl = fontUrlMatch[1];

    // 2. 使用字体文件URL创建FontFace并加载
    const customFont = new FontFace('VT323', `url(${fontFileUrl})`);
    return customFont.load();
  })
  .then(loadedFace => {
    document.fonts.add(loadedFace);
    // 字体加载完成后的自定义操作，比如设置页面字体
    document.body.style.fontFamily = 'VT323, monospace';
  })
  .catch(error => {
    alert(`加载字体失败: ${error.message}`);
    console.error(error);
  });

补充说明 #

• 正则匹配是针对Google Fonts返回的标准CSS格式，只要其@font-face规则的src属性包含url()格式就有效
• 字体名称需与Google Fonts中的官方名称一致（示例中为VT323），避免后续使用时出现字体不生效的问题
• 原代码存在语法错误：.then(function(loaded_face) { ... }后缺少闭合括号)，示例中已修正

内容的提问来源于stack exchange，提问作者david.pfx