Custom Code Change in Symmetry

Technical Q&A
,

Topic summary

Custom fonts not loading in the Symmetry (Shopify) theme preview despite adding files and CSS.

  • Attempted steps: Uploaded Cinzel-Regular.woff (and Bacalisties.woff) to Assets; added @font-face declarations in theme.liquid. First used asset_url, then tried file_url with font-style: normal.
  • Intended usage: Headings (h1–h6) set to Cinzel-Regular; body and p set to Bacalisties via CSS.
  • Technical context: @font-face is used to load custom web fonts from theme files.
  • Evidence provided: Store preview link and a screenshot.

Current status: Fonts still do not render in the site preview. No confirmed solution or guidance yet; the request for help remains open.

Summarized with AI on December 23. AI used: gpt-5.
1

I’m trying to add two custom codes to my Symmetry theme and they aren’t showing up. I’ve added one of the fonts to my assets folder.

Here’s the font that I’ve added to the liquid.theme file:

@font-face {
font-family: ‘Cinzel-Regular’;
src: url(‘{{‘Cinzel-Regular.woff’ | asset_url}}’);

h1, h2, h3, h4, h5, h6 {
font-family: Cinzel-Regular !important;
}

The font isn’t showing up on my site preview. Can someone please help?

Preview link - https://dti0ivu91l5mfhq8-70096191710.shopifypreview.com

Screenshot 2024-07-29 at 6.40.00 AM.png
Screenshot 2024-07-29 at 6.40.00 AM.png590×210 9.32 KB

2

I’ve tried it this way too and it’s not working. Anyone have an idea what could be wrong?

@font-face {
font-family: ‘Cinzel-Regular’;
src: url(‘{{‘Cinzel-Regular.woff’ | file_url}}’);
font-style: normal;
}

@font-face {
font-family: ‘Bacalisties’;
src: url(‘{{‘Bacalisties.woff’ | file_url}}’);
font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
font-family: Cinzel-Regular !important;
}
body, p{
font-family: Bacalisties !important;