Docusaurus 未加载自定义字体

Question

我的问题是 Docusaurus 没有加载自定义字体。我有以下结构：

website
│      
└───src
│   │   pages
│   │   ...
│   │
│   └───css
│       │  custom.css
│   
└───static
    │       
    └─── fonts
           │       
           └─── Poppins
                  │  Poppins-Regular.ttf
                  │  Poppins-Bold.ttf

我的字体位于 ../static/fonts/Poppins/ 文件夹内，而我的 css/custom.css 内有以下代码：

@font-face {
  font-family: 'Poppins-Regular';
  src: url('../../static/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Poppins-Bold';
  src: url('../../static/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
}

:root {
  --ifm-color-primary: #2e32ae;
  --ifm-font-family-base: 'Poppins-Regular';
  --ifm-heading-font-family: 'Poppins-Bold';
  --ifm-font-family-monospace: 'Poppins-Regular';
}

当我重建我的 docusaurus 项目时，我生成了其他字体（可能是默认字体），但没有显示 Poppins 字体。

我已阅读this问题并尝试了其中的所有内容。另请检查并这个。但没有任何帮助。

注意：有趣的是，当我在 custom.css 文件中导入字体时，它正在工作，例如

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@400;700&display=swap');

但这对我没有帮助。我想从本地文件夹使用它。

Answer 1

将导入添加到

css/custom.css

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@400;700&display=swap');

我注意到在浏览器中如何使用网络选项卡加载 Google 字体（F12 -> 网络 - 刷新页面 -> 在名称部分查看下面的字体）字体的扩展名是 'woff2' 格式不是在 'ttf' 中，然后我下载了扩展名为 woff2 的字体，将其放入我的字体文件夹中，然后添加了以下代码：

@font-face {
  font-family: 'Poppins-Regular';
  src: url('../../static/fonts/Poppins/Poppins-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins-Bold';
  src: url('../../static/fonts/Poppins/Poppins-Bold.woff2') format('woff2');
}

:root {
  --ifm-color-primary: #2e32ae;
  --ifm-font-family-base: 'Poppins-Regular';
  --ifm-heading-font-family: 'Poppins-Bold';
  --ifm-font-family-monospace: 'Poppins-Regular';
}

它已经修复了。问题可以关闭。