Wordpress 找不到我的自定义字体

Question

@font-face {
    font-family: 'chunkfive';
    src: url('wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.woff2') format('woff2'),
         url('wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.woff') format('woff'),
         url('wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'chunkfive', 'Open Sans', Helvetica, Arial, sans-serif!important;
}

字体类型位于主题根文件中名为 'fonts' 的文件夹中。

我添加了 !important 以防 Wordpress 否决它。

根据 Chrome devtools，可以识别 font-family 命令，但选择了 Open Sans，因此链接字体文件一定有问题，但我无法弄清楚它是什么。

非常感谢。

Answer 1

我可以假设存在绝对路径和相对路径的问题。我建议你尝试使用绝对路径，即在路径前添加斜杠，以避免不匹配 URL:

@font-face {
    font-family: 'chunkfive';
    src: url('/wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.woff2') format('woff2'),
         url('/wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.woff') format('woff'),
         url('/wp-content/themes/onesquad/fonts/chunkfive_ex-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'chunkfive', 'Open Sans', Helvetica, Arial, sans-serif!important;
}

Answer 2

我相信你已经在你的主题中写了这个 css file.If 所以，从你的路径中删除 'wp-content/themes/onesquad/'。

Answer 3

假设您有 font.css 文件位于主题的 /css/fonts 文件夹中。然后，如果您的字体位于同一个 /fonts 文件夹中，您只需将 css 文件放入 functions.php 文件

中

  wp_enqueue_style( 'mytheme-fonts', get_template_directory_uri(). '/css/fonts.css');

然后在您的 fonts.css 文件中指向同一文件夹中的字体

@font-face {
    font-family: 'chunkfive';
    src: url('chunkfive_ex-webfont.woff2') format('woff2'),
         url('chunkfive_ex-webfont.woff') format('woff'),
         url('chunkfive_ex-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

这应该可以正常工作。

Wordpress 找不到我的自定义字体

Wordpress doesn't find my custom font

wordpress

font-face