我安装的字体（@ font-face）不适用于所有浏览器 - 只有Chrome

Question

我在网站上安装了字体，但它只会显示在Chrome上（我在Firefox和资源管理器中检查过）。我不知道我是否在编码中缺少某些东西？

字体外观

@font-face { 
font-family: 'octin_sports_freeregular'; 
src: url('octinsports-webfont.eot'); 
src: url('octinsports-webfont.eot?#iefix') format('embedded-opentype'), 
    url('octinsports-webfont.woff') format('woff'), 
    url('octinsports-webfont.ttf') format('truetype'), 
    url('octinsports-webfont.svg#octin_sports_freeregular') format('svg'); 
font-weight: normal; 
font-style: normal; 

} 

然后在HTML：

<link rel="stylesheet" href="http://weareprodigy.co/stylesheet.css" type="text/css"  charset="utf-8"> 

并在标题：

h1 { 

font-size: 32px; 
font-size: 2.25rem; 
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif; 
text-shadow: 2px 4px 3px rgba(0,0,0,0.7); 
} 


h2 { 
font-size: 28px; 
font-size: 1.875rem; 
font-family: 'octin_sports_freeregular', Impact, Charcoal, sans-serif; 
color: #8CC63E; 
-webkit-text-stroke-width: .5px; 
-webkit-text-stroke-color: black; 
} 

链接：www.weareprodigy.co

Answer 1

每个浏览器使用不同的字体加载方式，有的使用EOT文件，有的使用WOFF文件。

您目前只有EOT文件上传到服务器，chrome使用EOT文件，但IEFirefox将使用其他两种格式之一。

您需要确保将文件上传到正确的位置，并且在CSS之内，您正在链接到正确的位置。

编辑

就必须通过你的CSS看看。 Theres不需要在根级别添加style.css，因为在实际的主题中，字体已经被调用了。我的猜测是字体已经放在根级而不是在主题文件夹中。

EDIT 2

更改你的主题的style.css文件（可湿性粉剂内容/主题/ EPIK/style.css文件），以显示这个

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

由于字体是根，这应该直接到根文件，因为css正在寻找epik主题文件夹atm中的字体。