从 Firebase 加载字体答案

【问题标题】：Loading a font from Firebase从 Firebase 加载字体
【发布时间】：2021-06-05 16:29:03
【问题描述】：

在我的网络应用程序中，我想使用 Futura Bold 字体。我购买了整个家庭并将 Futura Bold.ttf 文件上传到 Firebase 存储。我复制了它与访问令牌的链接，并在样式标签中添加了以下内容：

@font-face {
            font-family: Futura;
            src: url(https://firebasestorage.googleapis.com/v0/b/my-project-name.appspot.com/o/Futura%20Bold%20font.ttf?alt=media&token=mytokenhere) format("truetype");
            font-weight: bold;
        }

但是它不会更改默认字体，并且在控制台中我收到以下错误：

我该如何解决这个问题？将字体存储在 Firebase 存储中是一种不好的方式吗？

【问题讨论】：

标签： html css firebase fonts firebase-storage

【解决方案1】：

通常情况下，最好使用传统的托管解决方案（例如，您用来托管网站的 HTML）来托管字体文件，因为它们是为此类用例而设计的，并且会执行缓存等操作以使字体加载更多高效（这在 firebase 存储上是可能的，但更难）。

也就是说，如果您想在 firebase 上托管它，您可以：

Firebase 存储默认启用 CORS 限制，这意味着它会默认阻止其他网站（不是用户直接在地址栏中输入 URL 的任何网站）加载文件。

对于您的用例，您可能希望通过创建一个包含以下内容的临时 cors.json 文件来 configure your firebase storage bucket to accept all requests：

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

然后，按照these instructions 安装gsutil 并运行：

gsutil cors set cors.json gs://your-storage-bucket.appspot.com

确保将 your-storage-bucket.appspot.com 替换为您自己的存储桶，您可以在您的 firebase 配置对象中找到它。

【讨论】：

感谢您的回答，它是电子邮件 HTML，所以没有托管，这就是我需要 Firebase 的原因。