web-dev-qa-db-ja.com

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では動作しません。これはどのように可能ですか？私は何が欠けていますか？

cssfirefoxfont-facefile-uri
187
Kaushik Gopal

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

Firefoxには、デフォルトで非常に厳密な「file uri Origin」（file:///）ポリシーが付属しています。他のブラウザーと同じように動作させるには、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 encodingを使用してみてください。 。

ニースの要約が利用可能です こちら

220
Manuel

.htaccessに次を追加することに加えて：（ありがとう@Manuel）

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

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

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

最終的に、私の.htaccessファイルは次のようになります（ウェブフォントをすべてのブラウザで機能させるセクションについて）

# 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
40
alademann

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

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

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

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

以前は、フォントフォルダーは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");
}
4
Octavian Vladu

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

3
niall.campbell

私は同じ問題を抱えていました。 H1、H2、または@ font-faceルールで対象とするスタイルをコードで再確認します。 font-family: 'custom-font-family' Arial, Helvetica etcの後にcom睡状態に陥っていたことがわかりました。Firefoxを除くすべてのブラウザーで問題なく表示されていました。私はcom睡状態を追加し、それは働いた。

3
tarquinwinot

私の同僚が、関連する「Firefoxでは動作しないフォントフェイス」問題の解決策を見つけたので、ここに残しておきます。

問題は、Firefoxがfont-family宣言を台無しにしていただけで、これが最終的に修正されました。

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

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

3
ruyadorno

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

Fontsquirrel.comを使用している場合、font-face Kit Generatorでexpert modeを選択し、下にスクロールしてBase64 Encodeの下でCSS Optionsを選択します-ダウンロードしたFont-Kitをプラグアンドプレイできる状態になります。

これには、httpリクエストが1つ少ないため、ページの読み込み時間が短縮されるという利点もあります。

2
Pierre

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

.htaccessに次の宣言を追加することで解決策が見つかった

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

見つかった via

2
davus

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

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

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

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

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

2
Casey

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

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

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

ローカル宣言を効果的に弱めるには、ローカルソース文字列をナンセンスにします。これに対して一般的に受け入れられている規則は、スマイリーUnicode文字（"☺"）を使用することです。どうして？ Paul Irishが彼のブログで素晴らしい説明をしています：

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

2
jason

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

それ以外の場合は、問題が発生するURLを指すようにすると役立つでしょう。

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

また、おそらく2番目の@ font-faceルールでfont-weight：boldが必要になることに注意してください。

1
David Baron

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

1
WebFixItMan

この問題に直面したとき、.htaccess Access Control Allow Originルールを使用しても機能しませんでした。

代わりに、web.configのIISに、以下に示す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>

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

1
brett

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

Font-faceのsrcからformat（opentype）を削除する必要がありましたが、Firefoxでも同様に機能しました。それ以前は、ChromeとSafariで正常に機能していました。

0
theva

フォントファミリーから引用符とスペースを削除するだけで、設定をいじる必要はありません。

この

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

これになります

body {font-family: DroidSerifRegular, serif; }
0
CR41G14

404が出たら、firebugで確認できますか？パスに問題があり、拡張子は同じでしたが、linux file.ttfはfile.TTFとは異なり、firefox以外のすべてのブラウザで動作することがわかりました。

助けて欲しい！

0
ipalaus

これを試して....

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

0
mgauthier

おそらくあなたの問題は、特にスペースとハイフンの使用（または使用不可）に関するネーミングの問題です。

私はsimilairの問題を抱えていましたが、フォント-/ファミリ名の周りにオプション引用符（ '）を配置することで修正したと思いましたが、実際には暗黙的に命名の問題を修正しました。

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

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

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

Droid実際のファミリ名を考慮したい場合、そのうちのSansおよびSerifは、たとえば子Sans RegularまたはSerif Bold、ここでスペースを使用して識別子を連結するか、ORスペースを削除し、 familyNameにはCamelCasingを使用し、サブ識別子にはハイフンを使用します。

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

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

OR

@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/

0
arri

同様の問題がありました。 fontsquirelデモページはFFで機能していましたが、すべてのファイルが同じドメインから来ていても、自分のページでは機能していませんでした！

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

0
SKWebDev

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

<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ページのヘッダーのスタイルタグで直接。私のために働く！

0
Aleksandar

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

これをTool barWesternからnicodeに試してください

View > Text Encoding > Unicode
0
Simplans

これは、フォントフェースのパスの設定方法に関する問題です。パスを「/」で開始しなかったため、Firefoxはスタイルシートのパスに基づいてフォントの検索を試みます。したがって、基本的にFirefoxは「root/css/font」ディレクトリではなく「root/css/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";
}
0
rossisdead

私は同じ問題を抱えていたので、コンテンツにメタを追加して解決しました

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

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

0
amir mola

外部フォントをインポートしようとすると、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 をご覧ください。

0
Ganesh Garad