@font-face css 添加自定义字体答案

【问题标题】：@font-face css add custom font@font-face css 添加自定义字体
【发布时间】：2017-05-31 08:37:16
【问题描述】：

我有一个 wordpress 主题，我想添加一个自定义字体。我在放置字体文件的主题文件中添加了一个“字体”文件夹。

现在我的 css 看起来像这样：

@font-face {
font-family: Brandon;
src: url('/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf');
font-weight: normal;
}
h1 {
font-family: Brandon;
}

但是，这似乎不起作用，我不明白为什么。

【问题讨论】：

您是否尝试过使用 Web 浏览器开发工具查看控制台？如果它无法找到或加载字体，这会给你一个错误。可能是一个不错的起点。
src: url('/domains/test.innerwhy.com/html/... - 看起来很像文件系统路径（基于文件夹名称），而它应该是（相对）URL。如果您不知道区别是什么，那么您应该首先阅读。

标签： css wordpress fonts font-face

【解决方案1】：

通过查看，我只能建议您从 css 文件中检查路径是否正确。如果字体也无法加载，最好设置回退。您可能还缺少设备支持的字体文件类型。

【讨论】：

【解决方案2】：

由于src路径错误，它不起作用。 “/domains/test.innerwhy.com/html/wp-content/themes/thefox/fonts/Brandon_bld.otf”

您可以在本地下载字体文件并像这样使用：

@font-face {
font-family: 'Montserrat-Regular';
src: url('../fonts/montserrat-regular-webfont.eot');
src: url('../fonts/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
     url('../fonts/montserrat-regular-webfont.woff') format('woff'),
     url('../fonts/montserrat-regular-webfont.ttf') format('truetype');

}

【讨论】：

当我尝试这个时，开发工具的控制台显示：加载资源失败：服务器响应状态为 404（未找到）
您可以从此链接下载。之后在线生成网络字体。 github.com/piamancini/landing/tree/master/fonts