@font-face 不会在 WordPress 中显示自定义字体

Question

我正在尝试将自定义字体添加到 WordPress 站点，但无法显示正确的字体。我能够让自定义字体在本地显示在 HTML 和 CSS 文档上，我很快就创建了，还通过使用 Firefox 中的 Web 开发人员工具，所以我知道字体正在加载。该字体名为 "Indubitably"，我是从 Font Squirrel 下载的，我正在专门测试 .woff 格式。

这是我的代码：

@font-face {
    font-family: 'indubitably';
    src: url('fonts/INDUBITA-webfont.woff');
}

h1, h2, h3, h4, h5, h6 {
    color: black !important;
    font-family: 'indubitably' !important;
}

我想我已经将字体上传到正确的目录，即/home/"myUsername"/html/wp-content/themes/hestia(我当前的主题)/fonts...

我试过将代码复制到 style.css，我使用了一个名为 Simple Custom 的插件 CSS，我也试过使用内置的 WordPress CSS编辑无果。

对不起，如果这是一个菜鸟问题，这是我的第一个牛仔竞技表演 ;)

Answer 1

我是 transfonter 的超级粉丝，当给定字体文件时，它会完成生成字体的所有繁重工作。如果您确实对您的@font-face 声明做错了什么，运行它可能会修改它们。

这是它吐出的那种字体：

@font-face {
    font-family: 'Indubitably';
    src: url('../fonts/Indubitably.woff2') format('woff2'),
        url('../fonts/Indubitably.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

除此之外，我会仔细检查您的 src url。

您的样式位于 wp-content/themes/{project}/assets/css，而您的字体位于 wp-content/themes/{project}/assets/fonts。

尝试src: url('../fonts/INDUBITA-webfont.woff');。 ../ 允许您返回包含目录（在本例中为 assets 文件夹）。

Answer 2

解决方案一：
在字体不影响的部分之一中，首先尝试 right-click 并检查元素。其次，在 inspect 页面中，您可以看到受影响的 font-family 的来源，并可以在源文件中轻松更改它。

方案二：
您可以在自定义主题

的 header 页面中放置静态

解决方案 3：
您可以将您的特定字体替换为具有相同名称的旧字体 -> 将新名称重命名为旧名称并将其放入字体文件夹中：wp-content/themes/hestia/fonts

Answer 3

尝试用完整的 URL 替换字体的本地路径，因此将 fonts/INDUBITA-webfont.woff 更改为 http://www.example.com/wp-content/themes/hestia/fonts/INDUBITA-webfont.woff（当然，将 example.com 更改为正确的域。

@font-face 不会在 WordPress 中显示自定义字体

@font-face won't display custom fonts in WordPress

html

css

wordpress

fonts

font-face