FirefoxでWebフォントが表示されない

Question

http://miche.com/

これは最も奇妙なことです。上記のページでは、2つのWebフォントとそのさまざまな重みを使用しています：Benton SansとJubilat、どちらもライセンスがあります。 h2（「Micheへの参加に興味がありますか？」「すでにMicheの代表者ですか？」）はJubilat Regularに設定されており、Firefoxに正しく表示されています。しかし、h1（「ようこそ！」）はジュビラットライトであり、タイムズニューローマンとして登場します。

フォントリスで両方の重みが生成されます。 両方とも同じサーバー上でホストされています。 どちらも同じ方法でコーディングされています。 ファイルを再アップロードしました。 IEの場合はFFで.eotを使用しようとしませんでした。 あなたが言う前に：はい、私は防弾しようとしました。

LightがそうでないときにRegularが表示されるのはなぜですか？私はちょうどCSSの適切な組み合わせを使用していないのだろうかと思います。

@font-face { 
    font-family: 'JubilatLight'; 
    src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot'); 
    src: url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.eot?#iefix') format('embedded-opentype'), 
     url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.woff') format('woff'), 
     url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf') format('truetype'), 
     url('https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.svg#JubilatLight') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
#main-container h1.jubilat { 
    font-family: "JubilatLight"; 
    font-weight: normal; 
    font-size: 40px; 
    color: #701271; 
    text-align: center; 
} 

Answer 1

。 Firefoxは絶対リンクを受け入れておらず、その代わりに相対的なリンクが必要でした。今、私はなるだろう、それを考え出したこと

<div id="main-container"> 
    <h1 class="jubilattest">WELCOME!</h1> 
</div> 

：

@font-face{ /* for IE */ 
font-family:JubilatLight; 
src:url(/FileUploads/CMS/Documents/jubilatlightwebfont.eot); 
} 
@font-face { /* for non-IE */ 
font-family:JubilatLight; 
src:url(http://:/) format("No-IE-404"),url(/FileUploads/CMS/Documents/jubilatlightwebfont.ttf) format("truetype"); 
} 
#main-container h1.jubilattest { 
    font-family: "JubilatLight"; 
    font-weight: normal; 
    font-size: 40px; 
    color: #701271; 
    text-align: center; 
} 

、その後、私のHTML：Mo'Bulletproofと相まって、私はそれはそうのように表示するために取得することができました他のフォントを修正することができます。あなたの提案をありがとうございました。

Answer 2

それはTimesNewRomanをデフォルトですので、私はあなたのCSSを見ていたし、あなたが正しくH2のためのあなたのフォントを定義していないように見えます：

#main-container h2.jubilat { 
color: #701271; 
font-family: "jubilat"; // <---------------- 
font-size: 18px; 
font-weight: normal; 
text-align: center; 
} 

Answer 3

をお使いのフォントが正しく/アップロードされていませんリンクされた。

jubilatlightwebfont.woffたとえば、404エラーが発生します。

FirefoxのWebコンソールをご覧ください。これは、例えば、いくつかのエラーがスローされます。

downloadable font: download failed (font-family: "JubilatLight" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed 
source: https://bc.miche.com/FileUploads/CMS/Documents/jubilatlightwebfont.ttf @ https://www.miche.com/FileUploads/CMS/Documents/MicheCorp092911v2.css 

（ところで：h2要素が私のために、あまりにもTimes New Romanを使用しています。）私はそれを考え出した

Answer 4

ジャスト（Yu-Jie Linでdiscribed）htaccessファイルを構成することにより方法もあります、あなたが知っているようにしたい

彼のコード：

<FilesMatch "\.(ttf|otf|eot)$"> 
    <IfModule mod_headers.c> 
    Header set Access-Control-Allow-Origin "*" 
    </IfModule> 
</FilesMatch> 

Answer 5

は内に実装base64エンコードのフォント・ファイルを使用してみてくださいCSS-DOC：

@font-face { 
    font-family:"font-name"; 
    src:url(data:font/opentype;base64,[paste-64-code-here]); 
    font-style:normal; 
    font-weight:400; 
} 

ソース：http://sosweetcreative.com/2613/font-face-and-base64-data-uri

それは完全に働いた...