Question

我尝试为我的网站设置自定义字体，但它在Firefox，Chrome或Edge / IE上都不起作用。 Firefox的开发人员工具中的网络部分表示找不到字体并列出404，尽管网址应该是正确的。这是我的代码：

    @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;
    }

User::Query

你能帮忙吗？谢谢！

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/etc.到找到字体。

现在，当我正在使用Wordpress网站时，我通常设置字体的方式只是将它们放入位于fonts文件夹中的正式命名的wp-content文件夹中。这样，它们就会被保留在uploads文件夹之外，这使得客户或您自己不太可能在Wordpress媒体管理器中意外删除它们。所以我通常的文件结构是：

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;
}

无论如何，不需要按照我的方式去做，但只是需要一些思考。希望这对网站有所帮助并祝你好运！

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

1 个答案: