Why isn't my @font-face displaying correctly?

Store Design
27

Hey! I’m not sure if this would help but I always remove the “?=v000000000” bit from my urls for fonts/images/etc and everything works fine, so in your case I would be using this:

@font-face {
    font-family: 'colors';
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot');
    src: url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff2') format('woff2'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.woff') format('woff'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.ttf') format('truetype'),
        url('https://cdn.shopify.com/s/files/1/0021/5619/9987/files/colors.svg#colors') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Other than that I don’t see any difference between your CSS and the CSS I usually use, it all looks good.

Let us know if that little tweak helped.