Custom Font not Displaying on Mobile / Safari

Store Design
,
1

My custom font is only displaying on Google Chrome - and not on mobile/safari and can’t figure out how to fix it.

This is the code I used in the base.css

@font-face {
font-family: ‘Rigero-Regular’;
src: url(‘{{ ‘https://cdn.shopify.com/s/files/1/0651/8439/9598/files/Rigero-Regular_1.woff2?v=1756514842’ | asset_url }}’) format(‘woff2’),
url(‘{{ ‘https://cdn.shopify.com/s/files/1/0651/8439/9598/files/Rigero-Regular_1.woff?v=1756514749’ | asset_url }}’) format(‘woff’);
}

h1, h2, .heading {
font-family: Rigero-Regular, sans-serif;
font-style: var(–font-heading-style);
font-weight: 400;
letter-spacing: calc(var(–font-heading-scale) * 0.06rem);
color: rgb(var(–color-foreground));
line-height: calc(1 + 0.3 / max(1, var(–font-heading-scale)));
word-break: break-word;
}

Any help would be appreciated :)!

2

This is the website: https://theluckyfind.store/

3

Liquid code is not processed inside .css assets, any asset_url there would not process.
It also looks like you’ve uploaded your fonts to the Files, not Assets.
And you’re using/know full URL which makes liquid unnecessary, so you can leave the code in base.css, but make its first part this:

@font-face {
  font-family: ‘Rigero-Regular’;
  src: url("https://cdn.shopify.com/s/files/1/0651/8439/9598/files/Rigero-Regular_1.woff2?v=1756514842") format(‘woff2’),
       url("https://cdn.shopify.com/s/files/1/0651/8439/9598/files/Rigero-Regular_1.woff?v=1756514749")  format(‘woff’);
}

Another option is to add a “Custom Liquid” section to the Footer section group in Customizer and use code like this there:

<style>
  @font-face {
    font-family: ‘Rigero-Regular’;
    src: url({{ "Rigero-Regular_1.woff2" | file_url }}) format(‘woff2’),
         url({{ "Rigero-Regular_1.woff"  | file_url }}) format(‘woff’);
  }
</style>

The rest can either stay in base.css, or keep it together with the font-face portion.

The benefit of the second solution is that your theme code remains untouched, which will help with theme updates in future…

Currently, your font is not loaded over the network, you can still see it in your main browser because it’s cached there.

4

Hi @studiommooy,

You can’t declare Liquid code, i.e. {{ }} in base.css file, so you need to move it via layout > theme.liquid file. And add it before the ‘‘ tag.

Screenshot
Screenshot1032×376 49.4 KB

5

You can try to update your code to this and check again

@font-face {
  font-family: 'Rigero-Regular';
  src: url('https://cdn.shopify.com/s/files/1/0651/8439/9598/files/Rigero-Regular_1.woff2?v=1756514842') format('woff2'),
       url('https://cdn.shopify.com/s/files/1/0651/8439/9598/files/Rigero-Regular_1.woff?v=1756514749') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* helps on Safari */
}

h1, h2, .heading {
  font-family: 'Rigero-Regular', sans-serif !important;
  font-style: var(--font-heading-style);
  font-weight: 400;
  letter-spacing: calc(var(--font-heading-scale) * 0.06rem);
  color: rgb(var(--color-foreground));
  line-height: calc(1 + 0.3 / max(1, var(--font-heading-scale)));
  word-break: break-word;
}

Best regards,

Dan from Ryviu: Reviews & QA

6

This worked! Amazing, thank you so much!

7

You are most welcome!