Why aren't my custom fonts displaying correctly on different devices?

Store Design
1

Hi there,

I am having issues with the custom fonts I’ve loaded swapping out on different devices and/or not showing at all. On my laptop and in edit mode, I cannot see the title font (Roca) but I can see the script font (Shadow). However, on mobile, I can see the title font but not the script font.

Website: https://season-house-website.myshopify.com/

Password: brandwell

Fonts: Shadow (script only added via liquid blocks) and Roca Two (Title font).

The codes I am using:

@font-face {
font-family: “roca”;
src: url(“rocatwo-rg-webfont.woff2”) format(“woff2”),
url(“rocatwo-rg-webfont.woff”) format(“woff”);
}

h1 {
font-family: ‘roca’!important;
}

h2 {
font-family: ‘roca’!important;
}

h3 {
font-family: ‘roca’!important;
}

h4 {
font-family: ‘roca’!important;
}

@font-face {
font-family: “shadow”;
src: url(“shadow-webfont.woff2”) format(“woff2”),
url(“shadow-webfont.woff”) format(“woff”);
}

2

@alishaserre

oh sorry but your have mixing some font type please check below all font type is required o custom font any theme upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG

3

Hi @alishaserre ,

I checked and the fonts are working fine.

For tags h1, h2, h3,… doesn’t work because another font is overwritten.

Screenshot_8.png
Screenshot_8.png1705×468 16.2 KB

Did you add an app to import this font?

4

Thanks for your help, I figured it out by using an app vs. custom coding.

5

Hi @alishaserre ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.