インポートされたフォントが特定のソースからロードされていません

Question

問題は独自の企業システムであるため、この一般的な例について事前にお詫び申し上げます。

私は、アプリケーションの範囲内でページをスタイルするために、セカンダリCSSファイルを編集できるWebアプリケーションをサポートしています。私は会社全体で使用されている非標準フォントを適用しようとしていますが、サイトのHTMLまたはヘッダーを編集するアクセス権はなく、CSSのみです。私は実際のフォントファイルURLを参照しながら（私たちの企業サイトで使用されているので）メインCSSのfont-familyを宣言しようとしましたが、実際にはロードされませんでした。

その後、同じフォントファミリスニペットを使用して、フォント宣言用に別のCSSファイルを作成し、URLを実際のファイルを相対パス（例：url（ 'fonts/DINWeb.woff' ））。このfonts.cssファイルを参照用フォントファイル（eot、ttf、およびwoffバージョン）とともに、テス​​ト用のPublic Dropboxフォルダに移動しました。アプリケーションのCSSの上部にある下のコード行（URLが変更されています）を使用してfonts.cssファイルをインポートするだけで、すべての作業を実行できました。

@import url('https://dl.dropboxusercontent.com/.../fonts.css');

問題は、Dropboxのソリューションは、単に一時的なテスト目的のためだったということです。期待どおりに機能していることが確認されたら、正確なフォルダ構造を、使用が承認された外部のホスティング場所に移動しました。 CSSのインポートコードを新しいURLに更新すると、フォントは読み込まれません。私はCSSファイルとフォントファイルに問題なくアクセスできるので、なぜWebアプリケーションがそれを読み込めないのかわかりません。私はまた、問題がないWebアプリケーションに取り込むこの同じホスティング場所にホストされた画像を持っています。それは問題のあるフォントだけです。このファイルは、Dropboxではホストされていても、他のソースではホストされていない場合でも動作します。私はまた、URLの参照を二重チェックしたし、フォルダ構造が変更されていないので、彼らはまだ正しいです。

ご迷惑をおかけして申し訳ございません。理想的には、最初に試したように、企業のURLをWebアプリケーションのCSSで直接参照したいのですが。それが不可能な場合は、Dropboxを永続的なソリューションとして使用することができないため、外部からホストされたファイルを使用する必要があります。

Answer 1

基本的に、2番目のホストができると言わない限り、他のドメインでホストされているリソースをロードすることはできません。 CORS

すべてを同じドメインに移動する（またはユーザーを常に特定のドメインにする）か、応答にAccess-Control-Allow-Originヘッダーを追加することで解決できます。

サーバで.htaccessファイルを編集できる場合は、この最後の問題を解決できます。追加：

Header set Access-Control-Allow-Origin "*"

それとも、リクエストを作成することがあります、そこからドメインに*を交換してください。

はい、サブドメインは異なるドメインです（abc.com,www.abc.comおよびdl.abc.comは同じではありません）。