web-dev-qa-db-ja.com

@ font-face EOTがHTTPS経由でロードされない

概要

IE 7,8,9-でHTTPSを介して@ font-faceを使用する問題に直面しています-単に読み込まれていません。HTMLページがHTTPSでホストされているかどうかは関係ありません。かどうか、HTTPでEOTフォントをロードしようとすると動作しますが、HTTPSでは動作しません。

フォントをホストするサーバーが適切なcontent-type = "application/vnd.ms-fontobject"を送信しています

私は複数のフォントを試しましたので、フォントに固有のものではありません。

フォントは Font Squirrel で生成されました

CSS構文

@font-face {
font-family: 'GothamCondensedBold';
src:url('path/to/fontgothmbcd-webfont.eot');
src:url('path/to/fontgothmbcd-webfont.eot?#iefix') format('embedded-opentype'),
    url('path/to/fontgothmbcd-webfont.woff') format('woff'),
    url('path/to/fontgothmbcd-webfont.ttf') format('truetype'),
    url('path/to/fontgothmbcd-webfont.svg#GothamCondensedBold') format('svg');
font-weight: normal;
font-style: normal;
}

サンプルページ

http://gregnettles.net/dev/font-face-test.html

cssinternet-explorerhttpsfont-face
49
Greg

私はこれが古いスレッドであることを知っていますが、計量する必要がありました。すべてのバージョンのInternet Explorer（7-11）でEOTおよびWOFFフォントがHTTPS経由でロードされないという同じ問題がありました。何時間も試行錯誤を繰り返し、ヘッダーを他の作業サイトと比較したところ、混乱しているのはvaryヘッダーであることがわかりました。これらのファイルタイプのヘッダーを設定解除すると、すぐに問題が修正されました。

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

ボーナスリーディング

23
Chris Haas

HTTPSでは問題が発生しましたが、HTTPでは発生しませんでした。何らかの理由でIEは200 OK応答を無視して、さまざまなフォントオプションを続行します。

私の場合、問題はフォントのHTTPヘッダーCache-Control: no-cacheでした。これはHTTPでは正常に機能しますが、HTTPSではInternet Explorerはダウンロードされたフォントを無視します。

私の最良の推測は、この動作のバリエーションであるということです：

KB 815313-SSLを介してアクティブドキュメントをダウンロードするときにキャッシュを禁止する（ archive ）

したがって、IE Developer Toolsネットワークビューで各フォントを処理する場合は、Cache-Controlヘッダーがあるかどうかを確認して削除する価値があります。

42
tjdett

これは通常、.woffまたは.eotファイルのダウンロード中に次の応答ヘッダーが原因で発生します。

  • Cache-Control = no-cache、no-store、max-age = 0、must-revalidate
  • プラグマ=キャッシュなし

私の場合、私はspring-bootを使用しており、これらのヘッダーを削除するには次の手順を実行する必要がありました。これで問題も解決しました。

public class SecurityConfig extends WebSecurityConfigurerAdapter { 
@Override
public void configure(HttpSecurity http) throws Exception {
   http.headers().defaultsDisabled()
        .addHeaderWriter(new StaticHeadersWriter("Cache-Control"," no-cache,max-age=0, must-revalidate"))
        .addHeaderWriter(new StaticHeadersWriter("Expires","0"));
 }
}
7
Som Nath Upadhyay

ここに私の修正があります：

IIS=のURL書き換えアドオンを使用して、すべてのEOTファイルにCache-Controlヘッダーを設定します。

<system.webServer>
....
<rewrite>
  <outboundRules>
    <rule name="Fix IE9 missing font icons">
      <match serverVariable="RESPONSE_Cache_Control" pattern=".*" />
      <conditions>
          <add input="{REQUEST_URI}" pattern="\.eot.*" />
      </conditions>
      <action type="Rewrite" value="private, max-age=36000" />
    </rule>
  </outboundRules>
</rewrite>
</system.webServer>
4
user2173353

キャッシュヘッダーなしで、IE9Windows Vistaのクライアントはまだフォントをロードしません（偶数私の新しい開発マシンではIE9エミュレーションモードのIE11がそうしています）。

Internet Explorerでクライアントマシンの問題を修正することができました。

  • インターネット設定
  • 高度な
  • セキュリティ

また、「暗号化されたページをディスクに保存しない」オプションのチェックを外します。

ボーナスリーディング

HTH

4
TObject

特定のバージョンのIEは、サイトのドメイン外でホストされている@fontfaceフォントを使用できません（ページが http：//a.domain.tld/page。 html -何らかの理由でフォントも http：//a.domain.tld/ ）にある必要があります。EOTファイルをドメインに置いて、もう一度やり直してください。

IE9はクロスオリジンWebフォントのダウンロードをブロックします

3
amcc

この問題は、Apacheサーバーのhttpd.confまたは.htaccessに次のエントリを追加することで解決されました。

機能させるために、FilesMatchからLocationMatchに変更し、ヘッダーが完全に設定されるようになりました。

フォントファイルの正しいMIMEタイプを設定するには、次の行をconfigに追加します。

 AddType application/vnd.ms-fontobject .eot
 AddType font/truetype .ttf
 AddType font/opentype .otf
 AddType font/opentype .woff
 AddType image/svg+xml .svg .svgz

フォントファイルのヘッダーを更新するために、この修正プログラムはIEブラウザーでフォントアイコンをレンダリングするために完全に機能しました。

<LocationMatch "\.(eot|otf|woff|ttf)$">
   Header unset Cache-Control
   Header unset no-store
</LocationMatch >
2
sri_bb

Apache/2.2.15の有効なソリューションは、.htaccessを追加することです

<FilesMatch "\.(woff)$">
    Header unset Cache-control
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Cache-control
</FilesMatch>
2
Ar2r

同様の問題に直面しましたが、Varyヘッダーが原因でした。私の設定では、Ruby on Rails with rack-cors gemを使用しました。フォントファイルにVary: Originのヘッダーを与えていました。これを修正するために、ミドルウェアをセットアップしたAccept-Encodingにヘッダーを設定できます。

config.middleware.insert_before 0, "Rack::Cors", :debug => true, :logger => (-> { Rails.logger }) do
  allow do
    origins '*'

    resource '/cors',
      :headers => :any,
      :methods => [:post],
      :credentials => true,
      :max_age => 0

    resource '*',
      :headers => :any,
      :methods => [:get, :post, :delete, :put, :options, :head],
      :max_age => 0,
      vary: ['Accept-Encoding'] # Required or IE11 fonts will break
  end
end
1
mahi-man

Https経由でEOTファイルを直接ダウンロードしようとしましたか？ SSL証明書が不良（不一致）のように見えますが、これが問題の原因になっている可能性があります。

また、これらのファイルに対してクロスドメインポリシーが設定されていることを確認する必要があります。これにより、この問題の要因ではないかもしれませんが、特定のブラウザーで問題が発生する可能性があります。

1
ldg

これは、CDNの問題のようです。これを確認するには、ホストファイルを変更して、SSLドメインが非SSLトラフィックが提供されるIPを指すようにします。フォントがレンダリングされる場合、CDNを呼び出して、そのサーバーがフォントファイルに対して行っていることを把握する必要があります。

1
tterragnoj

かなり古い質問ですが、誰も正しく答えなかったと思います。問題は、フォントが別のファイルからロードされていることであり、私にとってはこれはAccess-Controll-Allow-Originの場合のようです。

それはほとんどまっすぐに機能しており、virtualhostsファイルまたは.htaccessに次を追加します：

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</ifModule>

apacheを再起動します

0
Nik Chankov

OK、これがIE8のバグだと言えます。少なくともApacheで動作する回避策を作成しました-mod_rewriteを使用して、「。eot」または「.eot？」で終わるリクエストにHTTPを強制します他のすべてのリクエストに対してHTTPSを強制します。 .htaccessファイルで、次を実行します。

<IfModule mod_rewrite.c>
  RewriteEngine on

  # if HTTPS request, force to HTTP if file ends in '.eot' or '.eot?'
  RewriteCond %{SERVER_PORT} 443
  RewriteCond %{REQUEST_URI} ^.*\.eot\??$
  RewriteRule (.*) http://%{HTTP_Host}%{REQUEST_URI} [R=301,L]

  # if HTTP request, force to HTTPS if file does NOT end in '.eot' or '.eot?'
  RewriteCond %{SERVER_PORT} 80
  RewriteCond %{REQUEST_URI} !.*\.eot\??$
  RewriteRule (.*) https://%{HTTP_Host}%{REQUEST_URI} [R=301,L]

</IfModule>

正確ではないため、サーバーオーバーヘッドが追加され、文字列比較がすべての要求ごとに実行されると確信していますが、問題は修正されます:)

0
siliconrockstar

次の人に役立つことを期待して、私の状況と解決策を共有したかった。

私のフォントは[〜＃〜] https [〜＃〜]経由で配信されていました。これは、Amazon CloudFrontを介して配信されます。 Elastic Load Balancer。

フォントには次のヘッダーがありました。

Access-Control-Allow-Origin: *
Cache-Control: public, max-age=100000
Cache-Control: no-cache="set-cookie"

他の答えやインターネットで見つけることができるものに基づいて、max-ageおよび適切なCORS構成がありました。ただし、IE9はまだフォントをレンダリングしません。

問題はCache-Control: no-cache="set-cookie"ヘッダー。これは、Set-Cookieヘッダー（間違っていない限り）。

そのヘッダーがどこから来たのかを理解するのに時間がかかりました。このヘッダーは[〜＃〜] elb [〜＃〜]によって追加されました。これは、Cookieを介してスティッキーセッションを使用しているためです。ロードバランサーはこのCache-Controlヘッダーがそのようにセットアップされている場合。

そのため、スティッキーセッションをオフにすると、ヘッダーが削除され、フォントがレンダリングされました。 HTTPリクエストのスティッキーセッションをオフにし、HTTPSリクエストのセッションをオンのままにしておくことができました。これは非静的アセットにSSLを強制するので問題ありませんが、SSLの有無にかかわらずCloudFrontに静的アセットを提供します。

他の誰かがこの情報が役立つことを願っています。

0
Sean Adkinson

IE 11でHTTPSを介してWebフォントを使用すると、HTTPの使用が問題なく動作する場合があります。

IE 11の影響を受ける）の特定のバージョンのみ、たとえば.

  • バージョン11.0.9600.19035、バージョン11.0.65の更新
  • バージョン11.0.9600.17728、バージョン11.0.18を更新します。

どちらもWin 7のIEです。Win8またはWin 10で問題は発生していません。

GoogleはMicrosoft Internet Explorerバージョン6以降をサポートすると述べていますが、それらのフォントは上記と同じように影響を受けます。

現在、回避策はなく、影響を受けるバージョンをHTML/CSS/JavaScriptで検出する方法すらありません。

0
jofeu

こんにちは、私はちょうど同じ問題に遭遇しました、そして、私は修正を見つけました、これが他の人を助けることを願っています。

これはIE <= 8のコメントのバグです。この問題に関する情報はここで確認できます https://communities.bmc.com/thread/88899 基本的に、問題はIEでhttps：Cache：no-cache headersが設定されたキャッシュをダウンロードすることです。キャッシュヘッダーを削除して、問題があるかどうかを確認してください。

この回答も役立つ場合があります IE：*を*からダウンロードできません。このインターネットサイトを開くことができません。要求されたサイトは利用できないか、見つかりません

0
brentmckendrick

https：// ...で完全なURLを試してください。ファイルが大きく圧縮できないためにhttpsの方が遅いため、「安全でないコンテンツ」の警告を表示せずに、http/httpsの混合コンテンツを配信するためのいくつかのトリックがあります。あなたはそれらを検索するかもしれません。このようなトリックを使用する必要はありません。

0
Joop Eggen