Shopify themes, liquid, logos, and UX
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;
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.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024