Question

我试图找出为什么我的自定义字体没有加载到WordPress（MAMP，Mac，localhost）。

字体存储在wp-content/themes/twentysixteen/fonts/

中

然后在wp-content/themes/twentysixteen/style.css我有以下CSS：

@font-face {
  font-family: "Averta-Regular";
  src: font-url("./fonts/31907B_A_0.eot");
  src: font-url("./fonts/31907B_A_0.eot?#iefix") format('embedded-opentype'), font-url("./fonts/31907B_A_0.woff2") format('woff2'), font-url("./fonts/31907B_A_0.woff") format('woff'), font-url("./fonts/31907B_A_0.ttf") format('truetype');
}

html {
  font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Averta-Regular", "Helvetica Neue", sans-serif;
}

Chrome向我展示了这一点：

https://github.com/uber/rides-android-sdk/blob/master/README.md

仅当我在操作系统上安装了字体时才有效。

Answer 1

尝试在CSS的第3行和第4行将font-url更改为url。看起来它并没有认识到您尝试加载的自定义字体的来源。

Answer 2

您必须在functions.php中链接该字体像这样 wp_enqueue_style（＆＃39; custom＆＃39;，get_template_directory_uri（）。＆＃39; https://fonts.googleapis.com/css?family=Roboto＆＃39;）;

Answer 3

下载ttf字体，可用于商业用途，访问https://1001fonts.com/free-fonts-for-commercial-use.html?page=1&items=10将一个副本粘贴到您的主题中，然后像上面一样使用@ font-face。一切都应该工作得很好。当我在我的本地服务器上进行开发时，一切正常。在发布到public_html时，字体拒绝加载。不得不改为ttf，你也可以尝试其他网络字体格式，但ttf工作正常。更好的是你可以使用谷歌字体。

Answer 4

当我使用这个wordpress uncode子主题并上传自定义字体时，遇到了类似的情况。

我意识到这是因为我没有在第二个src属性后面加上;

@font-face{
  font-family: 'Lato';
  src: url('fonts/Lato.eot');
  src: url('fonts/Lato.eot?#iefix') format('embedded-opentype'),
  url('fonts/Lato.woff') format('woff'),
  url('fonts/Lato.ttf') format('truetype'),
  url('fonts/Lato.otf') format('opentype'),
}

一旦我替换了它，字体就起作用了。愚蠢的错误，但是工作了几个小时后很难发现。

@font-face{
  font-family: 'Lato';
  src: url('fonts/Lato.eot');
  src: url('fonts/Lato.eot?#iefix') format('embedded-opentype'),
  url('fonts/Lato.woff') format('woff'),
  url('fonts/Lato.ttf') format('truetype'),
  url('fonts/Lato.otf') format('opentype');
}

Wordpress上的自定义字体无法正常工作

4 个答案: