无法导入 fontawesome-webfont 排版

Question

我正在尝试导入一种字体（fontawesome 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';
}

但是，它没有加载：

知道为什么会这样吗？我实际上可以在文件中看到预期的字体...

提前谢谢你。

编辑：

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

.

在网络内的“响应”选项卡中，我得到“加载响应数据失败”。可能问题出在哪里？

编辑2：

其他字体加载正常。例如，“Raleway”（非常相似，但不完全相同。注意“l”中的差异）：

我正在尝试获取这种字体（我认为它是 Adob​​e 的“Proxima Nova”，与 Fontawesome 网站中使用的相同，这就是名称的原因）...

Answer 1

我认为问题在于 font awesome 仅适用于图标，而不适用于文本。

如果你去 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";
}