@font-face在字体上返回404S

Question

我试着为我的网站设置一个自定义字体，但它在火狐，Chrome或Edge/IE上都不起作用。Firefox开发者工具中的网络部分说没有找到字体，并列出了404，尽管URL应该是正确的。这是我的代码：

null

    @font-face {
        font-family: 'Raleway55';
        src: url('/wp-content/uploads/font-organizer/RalewayRegular.ttf') format('truetype'),
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff') format('woff'),
    url('/wp-content/uploads/font-organizer/ralewayregular-webfont.woff2') format('woff2');
    font-weight: normal;
    }
你能帮忙吗？谢谢！
                

Answer 1

所以我恐怕你的道路实际上是不正确的。现在您的style.css指向web服务器根目录中的wp-content目录，我敢肯定，该目录不是Wordpress安装的位置。

因此，假设您按照以下方式设置Wordpress文件（这里只是基本设置，显然还有更多的文件）：

wp-admin
wp-content
  plugins
  themes
    my-theme
      style.css
  uploads
    font-organizer
      my-font.ttf
wp-includes

您希望CSS看起来如下所示：

@font-face {
    font-family: 'MyFont';
    src: url('../../uploads/font-organizer/my-font.ttf') format('truetype'),
font-weight: normal;
}

基本上，您所做的是告诉浏览器从css文件的位置向上导航两个目录，该目录应该将您放置在wp-content目录中，然后导航到uploads/ettics以查找字体。

现在，当我做Wordpress站点时，我通常设置字体的方法是将它们扔进一个名为字体的文件夹，该文件夹位于wp-content文件夹中。这样它们就不在上传文件夹中了，这样客户或您自己就不太可能在Wordpress Media Manager中意外地删除它们。所以我通常的文件结构是：

wp-admin
wp-content
  fonts
    my-font.ttf
  plugins
  themes
    my-theme
      style.css
  uploads
wp-includes

然后我的CSS会是这样的：

@font-face {
    font-family: 'MyFont';
    src: url('../../fonts/my-font.ttf') format('truetype'),
font-weight: normal;
}

总之，不需要按我的方式去做，只是给你一些思考的食粮。希望这有助于和好运与网站！