Question

我正在尝试将自定义字体添加到WordPress网站，但是我无法显示正确的字体。通过使用Firefox中的Web开发人员工具，我可以快速地制作出真正的自定义字体并在HTML和CSS文档中本地显示，因此我知道该字体正在加载。该字体称为“ 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（我当前的主题）/字体...

我尝试将代码复制到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网址。

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

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

Answer 2

解决方案1：
在不影响字体的部分内容中，首先尝试右键单击并检查元素。其次，在“检查”页面中，您可以查看受影响的字体系列的来源，并可以轻松地在源文件中对其进行更改。

解决方案2：
您可以在自定义主题的标题页中放置静态

解决方案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中显示自定义字体

3 个答案: