自定义字体未在 CSS font-face 中加载答案

【问题标题】：Custom font not loading in CSS font-face自定义字体未在 CSS font-face 中加载
【发布时间】：2021-08-16 04:59:03
【问题描述】：

所以我在 laravel 有一个生产项目。我面临的问题是，当我将自定义字体上传到公共目录（ttf、woff、woff2）然后在.css 文件中指定@font 系列时，当我将元素检查为font-family 但字体时，它确实出现在CSS 中实际上并没有改变。

@font-face {
    src: url('/../fonts/custom-font.woff');
    font-family: "custom-font" !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "custom-font" !important;

【问题讨论】：

在字体声明中你调用字体custom-font.woff，但在h1规则中你调用custom-font...所以我希望这不起作用。如果你想让它起作用，它们必须是相同的。
既然您已经对此进行了更改，请尝试不使用点。
是的，我的错，那是错误的，但不是在项目本身中，命名在那里是可以的 xD
另外，当我检查页面时，自定义字体没有出现在网络>字体部分中，它应该是对的吗？或检查 > 来源
不，浏览器只会获取页面上使用过的字体，无论您是否已经声明了它们。从字体系列名称中删除点，然后重试。点在 CSS 领域很特殊

标签： css fonts

【解决方案1】：

就我而言，我遇到了几个问题。首先我有!important，这不是必需的，但最重要的是，我使用的字体格式错误。

     @font-face {
        src: url('/../fonts/custom-font.woff');
        font-family: "custom-font";
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: "custom-font";
}

应该是这样的，并确保你仔细检查你正在使用的字体

【讨论】：