Wordpress 上的自定义字体不起作用答案

【问题标题】：Custom font on Wordpress not workingWordpress 上的自定义字体不起作用
【发布时间】：2016-12-13 01:22:19
【问题描述】：

我试图弄清楚为什么我的自定义字体没有加载到 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 向我展示了这个：

只有在我的操作系统上安装了字体时它才有效。

【问题讨论】：

标签： css wordpress fonts

【解决方案1】：

尝试在 CSS 的第 3 行和第 4 行将 font-url 更改为 url。看起来它只是无法识别您尝试加载的自定义字体的来源。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您必须在 functions.php 中链接该字体像这样 wp_enqueue_style('custom', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Roboto');

【讨论】：

【解决方案4】：

我在使用这个 wordpress 未编码子主题并上传自定义字体时遇到了类似的情况。

我意识到这是因为我没有用 ; 结束第二个 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');
}

【讨论】：