CSS @ font-faceはFirefoxでは機能しませんが、ChromeおよびIEでは機能します

次のコードは、Google Chromeベータ版とIE 7で動作します。ただし、Firefoxにはこの問題があるようです。私のCSSファイルがどのようにインクルードされているかが問題であると思っています。クロスドメインのインポートに関してFirefoxがあまり友好的ではないためです。

しかし、これはすべて静的HTMLであり、クロスドメインの問題はありません。

landing-page.htmlで、次のようなCSSインポートを実行します。

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

main.css内に、次のような別のインポートがあります。

@import url("reset.css");
@import url("style.css");
@import url("type.css");

そしてtype.css内で私は次の宣言をしています：

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

type.cssと同じ場所に「font」というディレクトリがあります。このフォントディレクトリには、すべてのwoff / ttf / svgファイルなどが含まれています。

私はこれに困惑しています。ChromeとIEでは機能しますが、Firefoxでは機能しません。これはどのようにして可能ですか？何が欠けていますか？

サイトをローカルで実行（file:///）

Firefoxには、file:///デフォルトで非常に厳密な「ファイルURIの起点」（）ポリシーが付属しています。他のブラウザと同じように動作させるには、に移動しabout:config、フィルタを適用しfileuriて、次の設定を切り替えます。

security.fileuri.strict_origin_policy

これをfalseに設定すると、さまざまなパスレベルにわたってローカルフォントリソースをロードできるはずです。

公開サイト

以下の私のコメントのとおり、サイトをデプロイした後にこの問題が発生している場合は、追加のヘッダーを追加して、問題がクロスドメインの問題として構成されているかどうかを確認できます。相対パスを指定しているので、構成しないでください。とにかく私はそれを試してみます：.htaccessファイルで、要求されている各.ttf / .otf / .eotファイルの追加ヘッダーを送信することを指定します。

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

率直に言って、違いが出るとは思っていませんが、非常に単純なので、試す価値はあります。それ以外の場合は、base64エンコーディングを使用してみてくださいは、フォントの書体にください。醜いですが、うまくいくかもしれません。

素敵な要約がここにあります

以下を.htaccessに追加することに加えて：（@Manuelに感謝）

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

次のように、.htaccessファイルにwebfont MIMEタイプを明示的に追加してみてください。

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

最後に、私の.htaccessファイルは次のようになります（すべてのブラウザーでWebフォントが機能するようにするセクションの場合）

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

私もこの問題を抱えています。私はここで答えを見つけました：http : //www.dynamicdrive.com/forums/showthread.php?t=63628

これは、Firefoxで機能するソリューションの例です。この行をフォントフェイスcssに追加する必要があります。

src: local(font name), url("font_name.ttf");

私の同僚は、関連する「Firefoxで動作しないfont-face以外のすべての場所」の問題の解決策を見つけたので、ここではそのままにしておきます。

問題は、Firefoxがfont-family宣言をめちゃくちゃにしていたことでした。

body{ font-family:"MyFont" !important; }

PS：私はhtml5boilerplateも使用していました。

私も同じ問題を抱えていました。H1、H2、または@ font-faceルールでターゲットにしているスタイルのコードを再確認します。font-family: 'custom-font-family' Arial, Helvetica etcFirefox以外のすべてのブラウザで正常に表示された後、昏睡状態になっていないことに気付きました。私はコマを追加し、それはうまくいきました。

私はまったく同じ問題を抱えていました。「fonts」という新しいフォルダを作成して、wp_contentに配置する必要がありました。ブラウザから次のようにアクセスできますhttp://www.example.com/wp-content/fonts/CANDY.otf

以前は、fontsフォルダは私のCSSファイルと同じディレクトリにあり、@ font-faceは次のようになりました。

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

上で述べたように、これはFirefoxでは機能せず、Chromeでのみ機能しました。今、私は絶対パスを使用したので機能しています：

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

Macでff4を実行すると、まさにこの問題が発生しました。ローカル開発サーバーを実行していて、@ font-face宣言は正常に機能しました。私はライブに移行し、FFは最初のページの読み込み時に正しいタイプを「フラッシュ」しましたが、より深くナビゲートすると、デフォルトでブラウザのスタイルシートが使用されます。

私は解決策が次の宣言を.htaccessに追加することにあることを発見しました

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

経由で見つかりました

まだ誰も言及していない簡単な解決策の1つは、base64エンコーディングを使用してcssファイルに直接フォントを埋め込むことです。

fontsquirrel.comを使用している場合は、font-face Kit Generatorでエキスパートモードを選択し、下にスクロールして、[ CSSオプション]で[ Base64エンコード]を選択します。ダウンロードしたFont-Kitはプラグアンドプレイの準備ができています。

また、HTTPリクエストが1つ少ないため、ページの読み込み時間を短縮できるという利点もあります。

一部のフォントでは、ファイル名に特定の文字が含まれていると、Firefoxで問題が発生することがあります。最近、ファイル名「237D7B_0_0」のフォント「Modulus」で問題が発生しました。ファイル名の下線を削除し、CSSを更新して新しいファイル名に一致させることで、この問題は解決しました。同様の文字を持つ他のフォントには、この問題はありません。これは非常に好奇心が強い...おそらくFirefoxのバグです。ファイル名は英数字のみにすることをお勧めします。

特にこのフォントでは、Google Font APIを使用する必要があります。

http://code.google.com/webfonts/family?family=Droid+Sans

それでもFontSquirrelのキットジェネレータを使用する場合は、Smileyハックオプションを使用して、ローカルフォントの問題を解消します。キットを生成したら、生成されたdemo.htmlがFireFoxで機能することを確認します。確かにそうでしょう。それをサーバーにアップロードします。FontSquirrelはすばらしいので、サーバーでも機能します。

ただし、生成されたキットコードをプロジェクトに統合するときに破損した場合は、標準のデバッグ方法を使用してください。404を確認し、問題が見つかるまで1行ずつ確認してください。WOFFは間違いなくFFで動作するはずなので、それから始めるのが良いでしょう。

最後に、これでうまくいかない場合は、FireFoxを更新します。私はあなたが最新のものを使っていると仮定してこれをすべて書きました。しかし、チェックインするバージョンを指定しなかったため、それも問題になる可能性があります。

ディレクティブのローカルソース宣言を調整してみてください@font-face。

FirefoxまたはGoogle Font APIのいずれかに既知のバグがあり、フォントがローカルにインストールされている場合、フォントのバリアントを使用できず、定義されたローカル名と一致します。

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

ローカル宣言を効果的に無効にするには、ローカルソース文字列を意味のないものにします。このために一般的に受け入れられている規則は、スマイリーユニコード文字（"☺"）を使用することです。どうして？Paul Irishは彼のブログで素晴らしい説明をしています：

http://paulirish.com/2010/font-face-gotchas/#smiley

これをローカルファイルでテストしますか、それともWebサーバー外でテストしますか？異なるディレクトリにあるファイルは、クロスドメインルールでは異なるドメインと見なされるため、ローカルでテストしている場合、クロスドメインの制限に達する可能性があります。

それ以外の場合は、問題が発生しているURLを指定すると役立つ可能性があります。

また、Firefoxのエラーコンソールを見て、CSS構文エラーやその他のエラーが報告されていないか確認することをお勧めします。

また、おそらく2番目の@ font-faceルールでfont-weight：boldが必要になると思います。

この問題に直面したとき、.htaccessアクセス制御許可元のルールを使用しても機能しませんでした。

代わりに、IISのweb.configで、次に示すsystem.webServerブロックを挿入します。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

これは私にとって魅力のように働きました。特定のドメインへのアクセスを制限する必要がある場合は、*をドメインに置き換えます。

Firefoxでフォントを正しく表示するために同じ問題が発生していました。これが私のために働くことがわかったものです。url属性でフォントを保持するディレクトリの前にスラッシュを追加します。これが私の変更前と変更後のバージョンです。

B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}

URLの「フォント」の前のスラッシュに注意してください。これは、ブラウザにルートディレクトリから開始してリソースにアクセスするように指示します。少なくとも私にとって-問題は解決しました。

外部フォントをインポートしようとすると、Firefoxやその他のブラウザで最も一般的な問題の1つに直面します。フォントがgoogle Chromeまたは他のブラウザーのいずれかで正常に機能することもありますが、すべてのブラウザーで機能するわけではありません。

このタイプのエラーには多くの理由があります。この問題の背後にある最大の理由の1つは、以前の定義済みのフォントです。以下のように、CSSコードの各行の終わりに！importantキーワードを追加する必要があります。

例：

@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}

説明：CSSファイルまたは上記のコードに上記のコードを入力します。上記の例では、「Hacen Saudi Arabia」をフォントファミリーに置き換え、フォントディレクトリに従ってurlを置き換えます。

CSSコードブラウザに！importantと入力すると、このセクションに自動的にフォーカスし、以前に使用したプロパティを上書きします。詳細については、https：//answerdone.blogspot.com/2017/06/font-face-not-working-solution.htmlをご覧ください。

404を取得した場合、firebugで確認できますか？パスに問題があり、拡張子は同じですが、linuxのfile.ttfがfile.TTFとは異なります。Firefoxを除くすべてのブラウザーで動作しました。

お役に立てば幸いです。

これは、フォントフェイスのパスの設定方法に関する問題です。「/」でパスを開始しなかったため、Firefoxはスタイルシートのパスに基づいてフォントの検索を試みます。したがって、基本的に、Firefoxは「root / css / font」ディレクトリでフォントを検索します「root / font」ディレクトリ。これは、フォントフォルダーをcssフォルダーに移動するか、フォントパスの先頭に/を追加することで簡単に修正できます。

これを試してください：

@font-face {
    font-family: "DroidSerif Regular";
    src: url("/font/droidserif-regular-webfont.eot");
    src: local("DroidSerif Regular"), url("/font/droidserif-regular-webfont.woff") format("woff"), url("/font/droidserif-regular-webfont.ttf") format("truetype"), url("/font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "DroidSerif Bold";
    src: url("/font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), url("/font/droidserif-bold-webfont.woff") format("woff"), url("/font/droidserif-bold-webfont.ttf") format("truetype"), url("/font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: "DroidSerif Regular" , serif;
}
h1 {
    font-weight: bold;
    font-family: "DroidSerif Bold";
}

これを試して....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

同様の問題がありました。fontsquirelデモページはFFで動作していましたが、すべてのファイルが同じドメインからのものであるにもかかわらず、私のページでは動作しませんでした。

私は自分のスタイルシートを絶対URL（http://example.com/style.css）にリンクしていることが判明したので、FFは別のドメインからのものであると考えました。スタイルシートリンクのhrefを/style.cssに変更すると、代わりに問題が修正されました。

おそらく、あなたの問題は、特にスペースとハイフンの使用（またはそうではない）に関する命名の問題です。

私は類似の問題を抱えていましたが、オプションを配置することで解決したと思いました、font- / family-namesの前後に引用符（ '）をが、実際には暗黙的に命名の問題が修正されました。

私はCSS仕様について完全に最新の状態ではありません。また、さまざまなクライアントが仕様を解釈する方法に（少なくとも私には）あいまいさがいくつかあります。さらに、それはPostScriptの命名規則にも関連しているようですが、間違っている場合は修正してください！

とにかく今私が理解しているように、あなたの宣言は2つの可能な異なるフレーバーの混合を使用しています。

@font-face {
  font-family: "DroidSerif Regular";

Droidを、たとえばSans RegularまたはSerif Boldのように、SansとSerifがメンバーである実際の姓と見なす場合は、スペースをすべて使用して識別子を連結するか、スペースを削除してCamelCasingを使用します。 familyName、およびサブ識別子のハイフン。

宣言に適用すると、次のようになります。

@font-face {
  font-family: "Droid Serif Regular";

または

@font-face {
  font-family: DroidSerif-Regular;

私は両方とも引用符の有無にかかわらず完全に合法であると思いますが、私はさまざまなクライアント間でそれと混合して成功しました。多分、ある日、私はこれ/これらの問題の詳細を理解する時間があります。

この記事は、関連するいくつかの側面を理解するのに役立ちました：http : //mathiasbynens.be/notes/unquoted-font-family

この記事には、PostScriptの詳細とAdobe仕様PDFへのリンクが含まれています。http： //rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/

font-familyから引用符とスペースを削除するだけで、設定をいじる必要はありません。

この

body {font-family: "DroidSerif Regular", serif; }

これになる

body {font-family: DroidSerifRegular, serif; }

私の場合、フォントフェイススタイルコードの挿入に関する問題を解決しました

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

index.htmlまたはphpページのヘッダーのスタイルタグ内のディレクトリ。私のために働く！

そのため、これはこの問題に対するGoogleの上位の結果の1つです。この問題を解決したものを追加したいと思います。

font-faceのsrcからformat（opentype）を削除する必要があり、Firefoxでも機能しました。それ以前は、ChromeとSafariでは問題なく動作していました。

あなたのコードのせいではなく、Firefoxの設定のせいかもしれません。

Tool bar 西洋からユニコードまでこれを試してください

View > Text Encoding > Unicode

私は同じ問題を抱えており、コンテンツにメタを追加することでそれを解決しました：

<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

これは、HTMLにUnicodeテキストがある場合、FirefoxとEdgeで発生します。

フォント宣言でsvgを使用する必要があったため、構文がどのように作成されたかはわかりませんが、Font Squirelには、1つのフォントだけから弾丸を証明する構文font-faceを作成するための非常に優れたツールがあります。

http://www.fontsquirrel.com/fontface/generator

font-faceタグのパスでURLを使用することもできます。「http://domain.com」を使用している場合、Firefoxでは機能しません。私が「http://www.domain.com」に変更すると機能しました。

私の問題は、Windowsがフォントに「font.TTF」という名前を付け、Firefoxが「font.ttf」を予期することでした。Linuxでプロジェクトを開いた後、フォントの名前を適切な名前に変更すると、すべてが機能します。