在 React App 中使用自定义字体不适用于所有浏览器

Question

所以我使用了一些自定义 .woff 字体，方法是使用 @font-face 加载它们并将它们存储在我的 src 文件夹中。在本地运行应用程序时，我的字体都可以工作，但是在将应用程序部署到实时域 Chrome 和 Firefox 后，不会加载桌面字体。然而，它们确实可以在 Safari（桌面和移动）、Chrome（移动）、Firefox（移动）上加载。我想知道为什么这些字体不会在 Chrome 和 Firefox 的桌面版本上加载。这些浏览器不读取 .woff 字体吗？

Answer 1

问题是因为我将它托管在 Github 页面上并使用自定义域创建了 CORS 问题。我通过将我的字体文件移动到公用文件夹并在公用文件夹中创建一个 CSS 文件以及加载字体来解决此问题。