Unable to add custom font Palo Alto Theme

Shopify Discussion

Topic summary

Users are experiencing issues adding custom fonts to the Palo Alto Shopify theme despite following the official documentation. The standard method involves uploading WOFF files to Assets and adding @font-face code to css-variables.liquid, but this approach fails—the custom font doesn’t load and the site reverts to Shopify’s default font.

Workaround discovered:

  • Upload font files to Shopify Content > Files (instead of Assets)
  • Add @font-face code directly to theme.css (rather than css-variables.liquid)
  • Then assign the font stack in css-variables.liquid as documented

This alternative method successfully loads custom fonts, though it deviates from the theme’s official instructions. Multiple users confirm experiencing the same problem, suggesting a potential issue with the documented approach or theme compatibility.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am working in the Palo Alto theme (preview of website linked below, it’s not yet published).

I am following all of the instructions here to add custom fonts. I upload a WOFF file to Assets, then assign it by adding this code under css-variables.liquid:

/* – code to use Gotham font-family in theme – /
@font-face {
font-family: ‘Seasons’;
src: url(‘{{ “Seasons.eot” | asset_url }}’);
src: url(‘{{ “Seasons” | asset_url }}#iefix’) format(“embedded-opentype”),
url(‘{{ “Seasons.woff” | asset_url }}’) format(“woff”),
url(‘{{ “Seasons.woff2” | asset_url }}’) format(“woff2”),
url(‘{{ “Seasons.svg” | asset_url }}#Seasons’) format(“svg”);
font-weight: normal;
font-style: normal;
} / - end - */

I then assign the heading font stack in css-variables.liquid to ‘Seasons’ like this:

–FONT-STACK-HEADING: {{ ‘Seasons’ }}, {{ heading_font.fallback_families }};
–FONT-STYLE-HEADING: {{ heading_font.style }};
–FONT-STYLE-HEADING-ITALIC: {{ heading_font_italic.style }};
–FONT-ADJUST-HEADING: {{ settings.heading_size | divided_by: 100.0 }};

It isn’t working, and insead falling back to the basic Shopify serif font. It works with other fonts that I’ve uploaded, but not this specific one. Any thoughts?

Preview here:

https://t1owmqxh7o5tj3nt-18156895.shopifypreview.com

TIA

2

I have the same issue. Have you been able to resolve this issue in the meantime?

3

Hi !

For anyone with the same issue, I found a way to make it work :

First, upload the fonts to the Shopify Content>Files.

Then, add this code to the theme.css :

@font-face { font-family: ADDYOURFONTNAMEHERE; src: url(‘add the url of the file here’); }

I then assign the heading font stack in css-variables.liquid just like the Palo Alto documentation says.

That is the only way I was able to make it work.

Hope this helps :slightly_smiling_face: