@ font-face - ブラウザーで要求されていないフォントがブラウザから要求されていないフォント

Question

<style>タグ内に、fold-foldコンテンツのヘッダーに重要なスタイルとして@font-faceを使用して4つのフォントを読み込もうとしています。

• ルービック-太字
• ルービック-斜体
• ルービック-LightItalic
• ルービック-正規リストにあるしかし最初
私は、これは正しいはず伝えることができるものから、

、ロードする。最初のものを削除した場合は、次の行が最初に読み込まれます。

HTML：

@font-face { 
    font-family: 'Rubik'; 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.eot?2568338257603816725'); 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.eot?2568338257603816725#iefix') format("embedded-opentype"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.woff?2568338257603816725') format("woff"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.woff2?2568338257603816725') format("woff2"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.ttf?2568338257603816725') format("truetype"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Bold.svg?2568338257603816725#timber-icons') format("svg"); 
    font-weight: 700; 
    font-style: normal; 
}; 

@font-face { 
    font-family: 'Rubik'; 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.eot?2568338257603816725'); 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.eot?2568338257603816725#iefix') format("embedded-opentype"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.woff?2568338257603816725') format("woff"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.woff2?2568338257603816725') format("woff2"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.ttf?2568338257603816725') format("truetype"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Italic.svg?2568338257603816725#timber-icons') format("svg"); 
    font-weight: 400; 
    font-style: italic; 
}; 

@font-face { 
    font-family: 'Rubik'; 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.eot?2568338257603816725'); 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.eot?2568338257603816725#iefix') format("embedded-opentype"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.woff?2568338257603816725') format("woff"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.woff2?2568338257603816725') format("woff2"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.ttf?2568338257603816725') format("truetype"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-LightItalic.svg?2568338257603816725#timber-icons') format("svg"); 
    font-weight: 300; 
    font-style: italic; 
}; 

@font-face { 
    font-family: 'Rubik'; 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.eot?2568338257603816725'); 
    src: url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.eot?2568338257603816725#iefix') format("embedded-opentype"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.woff?2568338257603816725') format("woff"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.woff2?2568338257603816725') format("woff2"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.ttf?2568338257603816725') format("truetype"), 
     url('//cdn.shopify.com/s/files/1/1735/6971/t/25/assets/Rubik-Regular.svg?2568338257603816725#timber-icons') format("svg"); 
    font-weight: 400; 
    font-style: normal; 
}; 

これは私がChromeのインスペクタで得るものです：私は、私が読んだ同様のスレッドに基づいて試してみた

もの：

1. は、すべての空白を排除し、 1つの行に各@font-faceを入れます（別のスレッドで問題を解決しました）。
2. ShopifyのCDN出力がリンクされていることをテストし、動作します。ヘッダー内のページで

、：

HTML：

<div class="gift-line show-for-large"> 
    <span>The Gift Line</span><span class="phone-number">XXX-XXX-XXXX</span> 
</div> 

とCSS、フォントフェイスの宣言の前にロードされた（スパンは、このルールを継承しなければならないので、ルービック、正規必要があります）をダウンロードする：

body { 
    font-family: "Rubik", sans-serif; 
    font-weight: normal; 
    font-style: normal; 
} 

したがって、この場合には、私は、少なくともルービック-正規のルービック・太字のほかに呼ばれるべきであることを知っています。 （何

は、任意の提案はありません？ありがとう

Answer 1

ブラウザは、あなたが使用して終了し、のみをダウンロードフォントどのようなファイルを決定するためにあなたのCSSやHTMLをanalizingことにより、ネットワーク接続を最小限に抑えるようにしてください。

同じfont-familyという名前を使用しているため、ブラウザでページのすべてのスタイルを組み合わせて使用​​してください（

）

また、キャッシングスマートブラウザの一部に騙されてはいけません。フォントのキャッシュは、http要求を防ぐためにすばやくキャッシュされます。

ネットワークトラフィックを無視して、フォントを取得する要素を調べ、computedタブを調べることをお勧めします。

フォントをデバッグする方法の詳細については、article by Paul Irishを参照してください。