@font-face - Fonts Not Requested by Browser, Not Loading

Question

I'm attempting to load 4 fonts using @font-face as critical styles in the header for above-the-fold content, within <style> tags.

• Rubik-Bold
• Rubik-Italic
• Rubik-LightItalic
• Rubik-Regular

From what I can tell this should be correct, however only the first in the list loads. If I removed the first one, the next-in-line will be the first to load.

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;
};

This is what I get in Chrome's inspector:

Things I've tried based on similar threads I've read:

1. Eliminated all whitespace and put each @font-face on one line (solved the issue in another thread).
2. Tested the links that Shopify's CDN outputs, and they do work.

On the page, in the header:

HTML:

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

And CSS, loaded before the font-face declarations (span should be inheriting this rule and therefore Rubik-Regular should be downloading):

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

So in this case, I know that at least Rubik-Regular should be called in addition to Rubik-Bold. (There are no

Any suggestions? Thanks

Answer 1

Browsers try to minimize network connections by analizing your css and html to determine what font files you end up using and only download those.

Since you're using the same font-family name here you have to make sure you use each style combination of font-weight and font-style on the page for the browser to download all of them.

Also don't be tricked by some of the caching smarts browser put into place. Font's are cached quickly to prevent http requests.

I suggest you ignore the network traffic and inspect your element that is supposed to get the font and look at the computed tab.

For more information around how to debug fonts have a look at this short article by Paul Irish.