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

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