@font-face 不适用于 Wordpress 中的子主题

Question

我浏览了很多过去的论坛关于@font-face的问答，并尝试了我能看到的一切来纠正这个问题。

使用 fontsquirrel 将字体转换为 woff 和 woff2。

只是字体没有出现在网站上。我不确定这是否是我的 CSS 代码问题，或者我是否缺少一段需要添加的 PHP 代码，或者主题 (Manon) 是否导致了某种覆盖。

样式.css

@font-face {
    font-family: 'pp_gosha_sansbold';
    src: url('../fonts/ppgoshasans-bold-webfont.woff2') format('woff2'),
         url('../fonts/ppgoshasans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'pp_gosha_sansregular';
    src: url('../fonts/ppgoshasans-regular-webfont.woff2') format('woff2'),
         url('../fonts/ppgoshasans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

wordpress 自定义部分中的附加 CSS

h1, h2, h3, h4, h5, h6, ul, li, a {
    font-family: 'pp_gosha_sansbold', sans-serif;
}

p {
    font-family: 'pp_gosha_sansregular', sans-serif;
}

字体位于服务器上的以下文件夹中：

public_html/wp-content/主题/manon-child/字体

儿童主题的 CSS：

public_html/wp-content/themes/manon-child

任何帮助将非常感激

我尝试检查 URL，将其更改为大多数替代方案：

../fonts/ppgoshasans-bold-webfont.woff2 公共_html/ 还有我通过浏览器检查并允许我下载字体的完整 URL，所以我想这是正确的。

Answer 1

您的字体保存在目录

public_html/wp-content/themes/manon-child/fonts

中，CSS文件位于

public_html/wp-content/themes/manon-child

中。但是 CSS 文件中的

@font-face

并不指向

fonts

目录；它是指向

public_html/wp-content/themes/fonts

.

的相对路径

在相对路径中，

../

表示“父目录”。对于目录

public_html/wp-content/themes/manon-child

中的 CSS 文件，

../

的路径指向

public_html/wp-content/themes

。因此，当您的 CSS 文件作为

../fonts/ppgoshasans-bold-webfont.woff2

的 font-face src 时，它指向一个不存在的位置。

您可以通过打开浏览器的开发人员工具（在大多数浏览器中按 F12）并转到“网络”选项卡来检查这一点。您可能会看到尝试加载的字体文件出现 404 错误，如果检查 URL，您将能够查看并调试它尝试加载的实际错误 URL。

要修复 CSS，请将路径段从

../

更改为

./

。

./

表示“当前目录”。

@font-face {
    font-family: 'pp_gosha_sansbold';
    src: url('./fonts/ppgoshasans-bold-webfont.woff2') format('woff2'),
         url('./fonts/ppgoshasans-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}