无法让字体在 wordpress 上工作

Posted 2023-03-15

【中文标题】无法让字体在 wordpress 上工作

【英文标题】：Can't get font face to work on wordpress

【发布时间】：2017-04-05 08:03:00

【问题描述】：

我要疯了，因为我的网站使用自定义网络字体，现在突然停止工作。

我从 Font Squirrel 获得了网络字体工具包，我正在使用我当地的 WP 网站对其进行测试。

我将字体工具包粘贴到 wp-content/themes/twentyfifteen/fonts/

这是主题文件夹中我的 style.css 中的内容

@font-face 
font-family: 'quicksandregular';
src: url('/fonts/quicksand-regular-webfont.woff2') format('woff2'),
     url('/fonts/quicksand-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;



h  
font-family: 'quicksandregular' !important;

网页中什么也没有发生。我看不到我的自定义字体 Bebas Neue。

任何帮助将不胜感激。

问候。

【问题讨论】：

您的开发控制台中是否出现任何错误？另外，您的选择器h 是否正确？

我没有收到任何错误。我也不能选择 h 作为所有标题？

不，您必须使用逗号分隔的列表来定位它们，如 ether 建议的那样。

感谢@lamelemon 虽然我仍然无法让它工作，请参阅我对以太帖子的评论。

404 表明 URL 不正确。发布您的控制台错误消息。

【参考方案1】：

您是要粘贴“quicksand”字体系列吗？无论如何，这应该是导入新字体的好模板。

@font-face 
    font-family: 'quicksandregular';
    src: url('/htdocs/www/wp-content/themes/twentyfifteen/fonts/quicksand-regular-webfont.woff2') format('woff2'),
         url('/htdocs/www/wp-content/themes/twentyfifteen/fonts/quicksand-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

然后当你调用你的字体时，它需要在一个有效的选择器中使用一个有效的名称来完成，即：

/* Style all Headlines */
h1, h2, h3, h4, h5, h6
    font-family: "quicksandregular";

您还应该像这样使用后备字体堆栈：

/* Style all Headlines */
h1, h2, h3, h4, h5, h6
    font-family: "quicksandregular", Arial, Helvetica, sans-serif;

【讨论】：

谢谢！我把！important 现在我在控制台上得到了 404。但是用字体（s16.postimg.org/vaw31oz1x/2016_11_21_223632.png）查看我的文件夹，我在 css 上的 url 是 url('/htdocs/wp-content/themes/twentysixteen/fonts/quicksand-regular-webfont.woff2') 格式（'woff2'）， url('/htdocs/wp-content/themes/twentysixteen/fonts/quicksand-regular-webfont.woff') 格式('woff');