Magento Go Fonts AssetsはIE9-10およびFirefox [閉じ]にロードされていません

magento.stackexchange https://magento.stackexchange.com/questions/968

  •  16-10-2019
  •  | 
  •  

質問

私は現在、Magento Goサイトで働いています。フォントスプリングからWebフォントを購入し、フォントアセットツールを使用して管理システムを介して4つのフォントファイル（EOT、WOFF、TTF、SVG）をアップロードしました。

フォントを挿入すると、次のCSSコードがカスタムCSSに追加されます。

../css_editor_fonts/ProximaNova-Sbold-webfont.eot
../css_editor_fonts/ProximaNova-Sbold-webfont.ttf
../css_editor_fonts/ProximaNova-Sbold-webfont.woff
../css_editor_fonts/ProximaNova-Sbold-webfont.svg

次に、これらの相対パスを正しいクロスブラウザー互換 @フォントフェイス宣言に適用しました。以下を参照してください。 

@font-face {
    font-family: 'proxima_nova_ltsemibold';
    src: url('../css_editor_fonts/ProximaNova-Sbold-webfont.eot');
    src: url('../css_editor_fonts/ProximaNova-Sbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css_editor_fonts/ProximaNova-Sbold-webfont.woff') format('woff'),
         url('../css_editor_fonts/ProximaNova-Sbold-webfont.ttf') format('truetype'),
         url('../css_editor_fonts/ProximaNova-Sbold-webfont.svg#proxima_nova_ltsemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

フォントは私のカスタムCSSで参照されます。

font-family: 'proxima_nova_ltsemibold';

これはIE7/8および最新のChromeで動作しますが、IE 9/10またはFirefoxでは機能しません。

フォントがIE9/10で機能していない理由は、Firefoxが非常に多く議論したものであるOrigin Requessのクロスリクエストによるものであり、私のIEコンソールにはこのエラーが含まれています。

@font-faceクロスオリジンリクエストに失敗しました。リソースアクセスは制限されています。

htaccessファイルに作成して、フォントがこれらのブラウザーで動作できるようにする編集があります。

Magento GoのHTACCESSファイルを更新または作成できるかどうかを知っていますか？

乾杯。

役に立ちましたか？

解決

すべてのブラウザにアップロードされるフォントファイルを入手することができませんでしたが、使用してフォントを提供することができました http://fontdeck.com/. 。どのフォントサービングサービスを使用するかは無関係ですが、使用を成功させることができました。

Magento Go Supportチームのメンバー（ライブチャットを介して）と話をし、クロスオリジンリクエストのためにさまざまなブラウザで提供されていないアップロードされたフォントファイルに関する問題を説明しました。フォントのサービングを有効にするためのHTACCESSソリューションについて説明し、それらの応答は「私たちのサーバーはカスタムHTACCESSファイルをサポートしていない」というラインに沿っていました。

@font-faceルールのSRCプロパティに絶対パスを使用しようとしましたが、Magento Goは、テーマエディターから処理され、テンプレートにリンクされているように見えるため、これらをカスタムCSSに追加すると思います。

編集：フォントリスWebフォントジェネレーターを使用して、フォントファイルをCSSにベース64エンコードしようとしたことも忘れていました（http://www.fontsquirrel.com/tools/webfont-generator）。購入したファイルをアップロードし、必要な高度な設定を有効にし、エンコードされたフォントでCSSをダウンロードしました（エンコードされたのは単なるWoffだと思います）。エンコードされたフォントを壊すSRCプロパティは、その前にランダムなURLがあったためです。

Magento Goでサポートチケットを提起し、問題を説明し、アップロードされたフォントファイルをすべてのブラウザに提供できるようにするために何をするつもりなのか尋ねました。機能リクエストなどに類似したものに引き上げられることを願っています。

とりあえず、それはフォントサービングサービスでなければなりません。 Font DeckからJavaScript埋め込みコードを使用しました。提供されたJSを静的ブロックに配置し、フロントエンドアプリを使用してすべてのページにそのブロックを追加しました。 Font DeckからHTMLリンク埋め込みメソッドを使用できますが、Magento Goのテーマエディターを使用して不可能なスクリプトタグの前にヘッダーに追加する必要があります。

これが短期的に誰かを助けることができることを願っています。長期的には、Magentoがこの問題の解決策を見つけに行くことを願っています。

他のヒント

相対パスではなく、フォントに絶対的なフルパス（HTTPS/HTTPを使用）を使用してみてください。

ライセンス： CC-BY-SA と 帰属
所属していません magento.stackexchange
scroll top