为什么我的网站字体没有加载到我的网站上？

Question

我已经在Google上尽可能多地搜索并在发布之前尽可能地在这里搜索所以请原谅我，如果这很容易回答的话。也许现在已经很晚了，我不知道。

该网站为http://artofbackpacking.com

无论我做什么，右上角的网络字体都没有加载。你会看到我有e001，e002等。他们在我的开发环境中工作，但不在我的实际网站上工作。字体来自icomoon.io，我使用了那里建议的CSS。我也尝试了Base64代码，但这也没有用。

这是我在CSS中获得的一小部分内容。

 @font-face {
font-family: 'socialFontsMichael';
src:url('../wp-content/fonts/socialFontsMichael.eot');
src:url('../wp-content/fonts/socialFontsMichael.eot?#iefix') format('embedded-opentype'),
    url('../wp-content/fonts/socialFontsMichael.woff') format('woff'),
    url('../wp-content/fonts/socialFontsMichael.ttf') format('truetype'),
    url('../wp-content/fonts/socialFontsMichael.svg#socialFontsMichael') format('svg');
font-weight: normal;
font-style: normal;
}

感谢帮助。

Answer 1

看起来你的路径不正确我在你的字体网址上得到了404。例如，尝试使用“/wp-content/fonts/socialFontsMichael.woff”。这对我来说似乎是一个有效的网址。

Answer 2

您遇到文件名（大写）或文件夹权限问题：

控制台错误：

尝试更改“fonts”文件夹的权限，或者原因是字体文件名称大写为“socialFontsMichael”，将其更改为小写，如“socialfontsmichael”。

Answer 3

您忘记在\之前放置e000，请尝试：

.social-feed:before {
    content: "\e000";
    background: #FF6600;
}
.social-feed:before hover {
    content: "\e000";
    background: #000;
}
.social-twitter:before {
    content: "\e001";
    background: #00aced;
}
.social-facebook:before {
    content: "\e002";
    background: #3b579d;
}
.social-instagram:before {
    content: "\e003";
    background: #dbd2c3;
}
.social-pinterest:before {
    content: "\e004";
}
.social-google-plus:before {
    content: "\e005";
    background: #c12026;
}
.social-youtube:before {
    content: "\e006";
    background: #ff3333;
}

如何使用图标字体：http://gomakethings.com/icon-fonts/