Custom Font uploaded on my end but not anyone else's

Patches
Visitor
1 0 0

I tried coding to import my custom font into my shopify website.

 

I use theme: Studio version 12.0.0

 

The font shows up on my end when I preview the website on my desktop but when I am looking at the website "picture" from the theme page under Online Store, it shows what everyone else sees, my website without my custom font.

 

My custom font uses WOFF2 format and I uploaded it to Content and Assets. 

 

Under Theme Liquid:

 

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: calc(1 + 0.8 / var(--font-body-scale));
font-family: 'Patches', sans-serif;

font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}

@font-face {
font-family: "Patches-Regular Font";
src: url(https://cdn.shopify.com/s/files/1/0684/1699/5568/files/Patches-Regular_Font_0355dc8c-9204-4ff9-9a98-...) format("[woff2]"); !important
}

 

Under Base.css

 

font-family: Patches-Regular Font) !important;
font-style: var(--font-heading-style);
font-weight: var(--font-heading-weight);
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;

Reply 1 (1)

MiraNextipedia
Shopify Partner
18 1 3

No doubt you already guessed this, but it looks like the font wasn't uploaded correctly, and thus, Shopify is reverting to a local font. I think your font family is being referred to through the code you shared inconsistently (Patches vs Patches-Regular Font). There could also be a few formatting mistakes. Try copying your question into ChatGPT or another AI tool to see if it can troubleshoot this for you. 

Nextipedia
info@nextipedia.com
www.nextipedia.com