Custom font not showing in Safari or mobile

Store Design
1

Hi!

I’ve read a lot of the support answers for this topic and none of the solutions seem to help me. I’m trying to add a custom font, here is my code:

@font-face {
  font-family: "Sentinel SemiboldItal";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: antialiased;
  src: url('{{ 'SentinelSemiboldItal.woff' | asset_url }}') format("woff"), 
    url('{{ 'SentinelSemiboldItal.woff2' | asset_url }}') format("woff2");
};

.h1, .h1 a, .h2, .h2 a, .h3, .h3 a, .h4, .h4 a, .h5, .h5 a, .h6, .h6 a, h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {
    font-family: "Sentinel SemiboldItal",serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -1px;
    color: #000;
}

I’ve also uploaded both files to my assets directory.

I also noticed in Safari I have two unknown fonts showing up:

every-tuesday_0-1622131476603.png
every-tuesday_0-1622131476603.png1152×402 94.4 KB

Here is a link to the page I’m working on:
https://create.every-tuesday.com/products/gouache-lovers-brush-set

Any help is greatly appreciated!

Thank you

2

please change your code to

@font-face {
  font-family: Sentinel SemiboldItal;
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: antialiased;
  src: url('{{ 'SentinelSemiboldItal.woff' | asset_url }}') format("woff"), 
    url('{{ 'SentinelSemiboldItal.woff2' | asset_url }}') format("woff2");
};

.h1, .h1 a, .h2, .h2 a, .h3, .h3 a, .h4, .h4 a, .h5, .h5 a, .h6, .h6 a, h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {
    font-family: Sentinel SemiboldItal,serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -1px;
    color: #000;
}
3

Hi AdamSmith12,

Thanks for the help, but removing the quotes still doesn’t make the font work in Safari.

4

Finally figured it out - shopify is sensitive. It wouldn’t let me have any specific css attributes in the @font other than the url and font family.

Thanks @AdamSmith12 for trying to help!

Incase anyone else runs into this issue here is the final code I used to get going.

@font-face {
  font-family: "Sentinel-SemiboldItal";
  src: 
    url('{{ 'Sentinel-SemiboldItal.otf' | asset_url }}') format('otf'),
    url('{{ 'Sentinel-SemiboldItal.woff' | asset_url }}') format("woff"), 
    url('{{ 'Sentinel-SemiboldItal.woff2' | asset_url }}') format("woff2");
};

$heading-font: "Sentinel-SemiboldItal", serif;
5

Hey @every-tuesday ! I am currently having this same issue with getting my custom font to show in mobile view for the headings. Did you use the above code AND the one with the headings listed?

6

Thank you so much! this finally worked for me.

May I ask how did you end up assigning font style: italic to that custom font after removing the code from @fontface?

Thanks