调试Webfont问题

Question

在过去的几个小时里，我一直试图破译为什么我无法在my site上正确加载特定的网页字体。

Google字体

我使用的是.WOFF2格式。有问题的两种字体，标题为Exo 2，正文为Open Sans。我一直在调试最新版本的Opera ¹ ，Chrome ² 和Firefox ³ ;所有这些都支持.WOFF2格式，但都没有加载字体。我在想我的CSS中有错误。问题是，我将它与Google's provided code进行了比较，看起来很匹配。为了记录，Opera是我的默认本机浏览器，也是我用来输入这个问题的浏览器。

在我的服务器上，我将从Google Fonts获取的字体文件存储在我的脚本资源文件夹中。他们被重新命名为更适合开发人员的名字（我不确定这是否给我带来了问题？）。

(Google Fonts)
https://cpugrade.com/a/s/exo-2-regular.woff2
https://cpugrade.com/a/s/open-sans-regular.woff2

以下是我为Google字体 ⁴ 尝试过的CSS：

@font-face {
    font-family: "Exo 2";
    font-style: normal;
    font-weight: 400;
    src: local('Exo 2'), local('Exo2-Regular'), url('exo-2-regular.woff2') format('woff2');
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url('open-sans-regular.woff2') format('woff2');
}

body { 
    font-family: "Open Sans", "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
}
body #content .section h1,
body #content .section h2 {
    font-family: "Exo 2", Ubuntu, "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
}

Font Squirrel

此外，在调试时，我决定尝试不同的格式，因此我转到Font Squirrel并下载了.WOFF格式。我没有重命名字体文件，并将其直接上传到我的服务器，我复制了提供的CSS代码。有趣的是，这确实有效。我觉得我应该指出我没有同时尝试两种Exo 2方法。

(Font Squirrel)
https://cpugrade.com/a/s/Exo2-Regular-webfont.woff

最后，这是Font Squirrel的CSS：

@font-face {
    font-family: "exo_2regular";
    font-style: normal;
    font-weight: 400;
    src: url('Exo2-Regular-webfont.woff') format('woff');
}

body #content .section h1,
body #content .section h2 {
    font-family: "exo_2regular", Ubuntu, "Segoe UI", Tahoma, Verdana, Helvetica, Arial, sans-serif;
}

非常感谢任何帮助。谢谢！

注释

1. Opera版本46.0.2597.57 (PGO)。
2. Chrome版60.0.3112.90 (Official Build) (64-bit)。
3. Firefox版本54.0.1 (64-bit)。
4. 我可以确认使用Google字体中的@import方法有效，但我最好还是想在本地托管。