How can I make my custom font appear on mobile?

Store Design
, , ,
1

Hello! How can I make my custom font appear on mobile? I’m using the Dawn theme.

The H2 on my site is supposed to be RecoletaAlt Bold, but on mobile (Chrome) it looks like Times New Roman. I have pasted the codes I added to make the custom font appear. I’ve read all the other threads about this but they did not work.

I added this to theme.liquid

{% style %}
@font-face {
font-family: "RecoletaAlt-Bold";
src: url({{ "RecoletaAlt-Bold.woff2" | asset_url }}) format("woff2");
}
{% endstyle %}

And I added this to base.css:

 h1, h2 {
    font-family: "RecoletaAlt-Bold" !important;
  }
.card__inner {
    background-color: transparent !important;
}

Thanks in advance to whoever can help!

2

Here’s my site: philippinebooks.com

3

@philippinebooks

Try the following code only run for mobile

{% style %}
@media screen and (max-width: 749px) {
 @font-face {
font-family: "RecoletaAlt-Bold";
src: url({{ "RecoletaAlt-Bold.woff2" | asset_url }}) format("woff2");
} 
}
{% endstyle %}

@media screen and (max-width: 749px) {
 h1, h2 {
    font-family: "RecoletaAlt-Bold" !important;
  }
.card__inner {
    background-color: transparent !important;
}
}

Thanks!

4

This didn’t work. The custom font did not appear on mobile and even disappeared on desktop. Any idea what else I can try?