web-dev-qa-db-ja.com

@ font-faceフォントは独自のドメインでのみ機能します

私は自分のウェブサイトで使用するためのフォントリポジトリのタイプを作成しようとしているので、他の設定なしでCSSのリポジトリ内の任意のフォントを呼び出すことができます。これを行うために、各フォントのさまざまなファイルタイプを含むリポジトリ内の各フォントのフォルダーを配置するサブドメインを作成しました。また、サブドメインのルートにfont-face.cssというcssファイルを配置し、各フォントの@font-face宣言で埋めました。フォントはどこからでも使用できるように絶対リンクにリンクされています。

私の問題は、フォントが表示されていない他のサイトでは、それらが配置されているサブドメインでのみフォントを使用できるようだということです。 firebugを使用して、font-face.cssファイルが正常にリンクおよびロードされたと判断しました。では、なぜフォントが正しく読み込まれないのですか？フォントファイルなどに保護はありますか？私はこれを許可されているすべてのフォントを使用しているので、なぜこれが発生しているのかわかりません。たぶんそれはApacheの問題かもしれませんが、私はそれにリンクするときにフォントを問題なくダウンロードできます。

ああ、そして明確にするために、私はこれを設定することによって著作権を侵害していません。私が使用しているすべてのフォントは、この種のものを許可するようにライセンスされています。ただし、このフォントのリポジトリにのみアクセスできるようにする方法を設定したいと思いますが、それは別のプロジェクトです。

cssapachecss3font-face
57
Ben Kulbertis

これは、Firefox（Firebugの言及による）がクロスドメイン、サブドメイン、Webフォントの埋め込みを悪い考えだからです。

フォントを提供するサブドメインのトップレベル.htaccessファイルにこれを追加することで、サブドメインからフォントをロードするように納得させることができます（ HTML5 Boilerplate ）：

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

これに応えて：

ただし、このフォントのリポジトリにアクセスできるのは自分だけである方法を設定したいのですが、それは別のプロジェクトです。

Access-Control-Allow-OriginのW3C仕様 は、ワイルドカード"*"または特定のドメイン以外のことを言っていません。これまでのところ、 this SO answer が見つかりました。これはOriginヘッダーの検証を示唆していますが、これはFirefox専用のヘッダーだと思います。他のブラウザについてはわからない（クロスドメインWebフォントが機能するために、上記の.htaccessトリックさえ必要ありません）。

92
BoltClock

Firefoxでこれを修正する別の方法は、base64エンコーディングを使用してcssファイルにフォントを直接埋め込むことです。上記の設定の一部にアクセスできない場合は特に気をつけてください。

fontsquirrel.com ：で必要なコードを生成できます：font-face Kit Generatorでエキスパートモードを選択し、下にスクロールして、CSSオプションでBase64エンコードを選択します-ダウンロードしたFont-Kitをプラグインし、演奏する。

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

8
Pierre

すべてのドメインからのリソースを許可せず、サイトのサブドメインからのみリソースを許可する場合は、次のようにする必要があります。

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" Origin_DOMAIN=$0
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin %{Origin_DOMAIN}e env=Origin_DOMAIN
    </FilesMatch>
</IfModule>

ソース： http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

4
Arvind Bhardwaj

http://www.fontsquirrel.com/fontface/generator を「エキスパート」モードで使用し、オプションとしてbase64を選択すると、スタイルシートで使用する必要なbase64エンコードデータを含むstylesheet.cssが返されました。 IE8以外のテスト済みのすべてのブラウザーで動作するようです。

フォントをホストすることを余儀なくされるサルサ請願書のようなサードパーティのツールにテーマを適用するときに、この問題に最も遭遇します。

皆さん、助けてくれてありがとう！

1
Darko Hrgovic