web-dev-qa-db-ja.com

FirefoxWebフォントがロードされない

FirefoxでのみWebフォントに問題があり、他のすべてのブラウザ（IEを含む）は完全に機能します。

私の問題は、Webフォントがまったく読み込まれないことです。

私はこの可能な解決策を見て、htaccessファイルを編集しました（ http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems ）が、私は持っていました運がない。

私が言える他の唯一のことは、Firefoxのエラーコンソールで次の警告が表示されることです。

「src」の値の解析中にエラーが発生しました。次の宣言にスキップしました。

これが私のfont-faceコードのサンプルです：

@font-face {
    font-family:AngelinaRegular;
    src:url(../fonts/angelina-webfont.eot);
    src:url(../fonts/angelina-webfont.eot?iefix) format(eot), url(../fonts/angelina-webfont.woff) format(woff), url(../fonts/angelina-webfont.ttf) format(truetype), url(../fonts/angelina-webfont.svg#webfontOvuhCGpN) format(svg);
    font-weight:normal;
    font-style:normal;
}

何か案は？

firefoxcssfont-face
17
user127181

私の経験では、Firefoxは@font-faceルールで引用符を期待することに気を配っています。

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

Firefoxのフォントにはクロスドメインの問題が発生する可能性もあります。参照： http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

11
Ric

ハ、私はこれを理解しようと何年も座っていました-私にとって、修正は各srcを別々に呼び出すことでした-つまり、これの代わりに（fontsquirrelで生成されたコード）：

@font-face {
    font-family: 'comic_bookregular';
    src: url('comic_book-webfont.eot');
    src: url('comic_book-webfont.eot?#iefix') format('embedded-opentype'),
         url('comic_book-webfont.svg#comic_bookregular') format('svg');
         url('comic_book-webfont.woff') format('woff'),
         url('comic_book-webfont.ttf') format('truetype'),

font-weight: normal;
font-style: normal;

}

これは私がしました：

@font-face {
  font-family: 'comic_bookregular';
    src: url('../fonts/comic_book-webfont.eot');
    src: url('../fonts/comic_book-webfont.eot?#iefix') format('embedded-opentype');
    src: url('../fonts/comic_book-webfont.svg#comic_bookregular') format('svg');
    src: url('../fonts/comic_book-webfont.woff') format('woff');
    src: url('../fonts/comic_book-webfont.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;

  }

見てみると、fontsquirrelコードには実際には「;」があります。 '、'があるはずですが、それを修正するだけでは役に立ちませんでした。何らかの理由で、すべてのsrcをセミコロンで閉じると、他に何もできないときに機能しました。

1
jadefoxxx

私が何度も経験したいくつかの問題は、about：config設定gfx.downloadable_fonts.enabledです。これをfalseに設定すると、クライアントはフォントをダウンロードせず、yahooやOffice 365のWebメールで見たように、WebフォントアイコンのあるWebメーラーがかなり悪くなります。 。

1
My1

私は最後の日に同じ問題に遭遇します。たくさんのヒントや解決策を見つけましたが、どれも私には役に立ちませんでした。次に、firebugとvoilaの代わりに組み込みのwebdeveloperコンソール（strg + shift + k）を使用しましたが、エラーが表示されます。

[14:18:36.161] GET http://www.example.com/font/fontawesome-webfont.ttf?v=3.2.0 [HTTP/1.1 401 Authorization Required 21ms]

はい、401エラーです。ページがhtaccessログインの背後にあるためです。 htaccess認証を無効にすると、すべて正常に機能します。

もちろん、これは回避策であり、解決策はありませんが、私のようにその問題に夢中になる前に、サイトがhtaccessログインの背後にあるかどうかに注意してください。それはあなたに多くの時間を節約することができます;）

発生する可能性のある別の問題：http＆httpsサイトで両方のプロトコルを使用する場合は、次のようなフォントを埋め込みます。

src: url('//www.example.com/fonts/webfont.eot');

これの代わりに：

src: url('http://www.example.com/fonts/webfont.eot');

それが誰かを助けることを願っています。この＆$！§％＆＃*のせいで多くの時間を失いました

1
AinStain

すべての提案を試し、それらを機能させなかったスタックオーバーフローを精査した後、修正した後、それを機能させたコードの何が問題であるかを発見しました。フォント宣言間のコンマを省略していました。

私は持っていた

font-family: "GiveMeTime" sans-serif;

の代わりに

font-family: "GiveMeTime", sans-serif;

そしてそれは他のすべてのブラウザで動作したので、私はエラーに気づきませんでした。この問題を抱えている他の人は、それが単純なフォントスタックエラーではないことを確認してください！

0
Patrick Hazard

私はちょうど同じ問題を抱えていました。問題は、フォントの名前のわずかな違いでした。 @ font-faceのfont-family属性には、このフォントを使用するクラスで使用したものとは異なるタイポグラフィがありました。どうやら、コンピューターのWebブラウザーは、タブレットのブラウザーよりも寛容です。

0
Fabien Nguyen