TypeScript报错TS2304：找不到名称'FontFace'，动态加载字体如何解决？

该TS2304报错属于TypeScript编译阶段的类型识别错误，原因是当前项目的类型声明库中没有包含FontFaceAPI的定义，和代码逻辑本身的运行正确性无关。

• 第一步：检查tsconfig基础配置
  打开项目根目录的tsconfig.json文件，确认compilerOptions下的lib数组包含"dom"项，参考配置如下：

  {
    "compilerOptions": {
      "lib": ["ESNext", "dom", "dom.iterable"]
    }
  }
  

  FontFace属于浏览器原生DOM API，必须引入dom类型库才能被TypeScript识别。

• 第二步：安装专用类型声明包
  如果配置dom库后仍存在报错，需要额外安装CSS字体加载API的专属类型包，执行以下命令即可：

  npm install @types/css-font-loading-module --save-dev
  #  yarn安装命令
  yarn add @types/css-font-loading-module --dev
  

• 临时规避方案（不推荐生产环境使用）
  如果不需要完整的类型提示，可在使用FontFace的代码文件顶部添加全局声明：

  declare const FontFace: any;
  

  也可以在实例化FontFace的代码上一行添加// @ts-ignore，跳过该行的类型检查。

配置完成后重启TypeScript语言服务即可（VSCode用户可按快捷键Ctrl+Shift+P，选择「TypeScript: Restart TS Server」），报错会直接消失。

注意：FontFace是浏览器端专属API，如果是SSR/SSG类项目，需要确保这段代码仅在客户端环境执行，避免在Node.js服务端运行时出现真实的未定义报错。

内容的提问来源于stack exchange，提问作者Joel Jaimon