Question

我已经构建了一个前端站点，我现在正使用html5blank主题上传到wordpress。我以前从未上传过自定义字体文件，我认为我的文件路径错误。字体文件位于我的子主题文件夹中的字体文件夹中。这就是我的代码 -

的style.css

@font-face {
    font-family: 'Gotham-Light';
    src: url('/fonts/Gotham-Light.otf') format('opentype');
    font-weight: normal;
    font-style: normal;

}

我也把它放在header.php中（不确定是否需要） -

 <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri() ?>/fonts/Gotham-Light.otf" />

如果出现问题，如何显示正确的路径？它可以是相对的还是需要绝对的？

Answer 1

您在@ font-face中使用绝对路径：

src: url('/fonts/Gotham-Light.otf') format('opentype');

开头的/表示它在webroot中查找字体。

假设您的style.css位于您的子主题文件夹中，fonts是其子文件夹，请尝试此操作（即在开始时没有/）：

src: url('fonts/Gotham-Light.otf') format('opentype');

Answer 2

您需要字体文件的地址而不是样式表。

 <link rel="stylesheet" href="<?php echo get_template_directory_uri('/fonts/Gotham-Light.otf') ?>/fonts/Gotham-Light.otf" />

Answer 3

这应该可以，只需将字体放在主题目录中名为fonts的文件夹中。

@font-face {
font-family: 'gothamlight';  
src: url(http://www.example.com/wp-content/themes/your-theme/fonts/Gotham-Light.otf);  
font-weight: normal;
font-style: normal;

}

Wordpress - 通过font-face添加自定义字体

3 个答案: