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-453aabc126ba.woff2?v=1707442701) 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;