无法导入fontawesome-webfont字体

Question

我正在尝试导入字体（字体版本4.4.0的webfont），我位于项目内部的名为“ fonts”的目录中：

我已阅读了几篇StackOverflow帖子，并尝试在CSS中使用@font-face导入它：

@font-face {
    font-family: 'MyWebFont';
    src: url('../fonts/fontawesome-webfont.eot');
    src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fontawesome-webfont.woff2') format('woff2'),
         url('../fonts/fontawesome-webfont.woff') format('woff'),
         url('../fonts/fontawesome-webfont.ttf') format('truetype'),
         url('../fonts/fontawesome-webfont.svg#svgFontName') format('svg');
}

然后在体内使用它：

body {
    margin: 0;
    padding: 0;
    font-family: 'MyWebFont';
}

但是，它没有加载：

关于为什么会这样的任何想法？我实际上可以在文件中看到预期的字体...

谢谢。

编辑：

在浏览器开发人员工具的“网络”标签中，我可以看到以下信息：

。

在网络内部的“响应”选项卡中，出现“无法加载响应数据”的信息。也许问题出在哪里？

Edit2：

正在加载其他字体就可以了。例如，“ Raleway”（非常相似，但不完全相同。请注意“ l”的不同）：

我正在尝试获取该字体（我想这是Adobe的'Proxima Nova'，与Fontawesome网站上使用的相同，这就是名称的原因）...

Answer 1

我认为问题在于，超棒的字体仅用于图标，而不用于文本。

如果您访问fontawesome.com并删除以下代码行：

.fa, .fas {
  font-family: "Font Awesome 5 Pro";
}

您将看到所有具有fa和fas类的图标都只是一个矩形。

您还需要给每个元素其他字体，例如：

.fab {
    font-family: "Font Awesome 5 Brands";
}

.fa, .far, .fas {
    font-family: "Font Awesome 5 Free";
}