Unable to add custom font Palo Alto Theme

[KJD]

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

[KNRB-Editor]

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

[clhbst]

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 🙂