Shopify themes, liquid, logos, and UX
How are custom fonts implemented in the "Baseline" theme?
This is a Shopify 2.0 theme, so it uses:
theme.css
theme.min.css
theme.liquid
css-variables.liquid
settings_data.json
settings_schema.json
Steps I've taken so far:
@font-face {
font-family: 'FK Grotesk-Thin';
src: url({{ "FKGrotesk-Thin.otf" | asset_url }}) format("opentype"),
url({{ "FKGrotes-Thin.woff" | asset_url }}) format("woff"),
url({{ "FKGrotesk-Thin.woff2" | asset_url }}) format("woff2"),
url({{ "FKGrotesk-Thin.ttf" | asset_url }}) format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FK Grotesk-Light';
src: url({{ "FKGrotesk-Light.otf" | asset_url }}) format("opentype"),
url({{ "FKGrotesk-Light.woff" | asset_url }}) format("woff"),
url({{ "FKGrotesk-Light.woff2" | asset_url }}) format("woff2"),
url({{ "FKGrotesk-Light.ttf" | asset_url }}) format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FK Grotesk-Regular';
src: url({{ "FKGrotesk-Regular.otf" | asset_url }}) format("opentype"),
url({{ "FKGrotesk-Regular.woff" | asset_url }}) format("woff"),
url({{ "FKGrotesk-Regular.woff2" | asset_url }}) format("woff2"),
url({{ "FKGrotesk-Regular.ttf" | asset_url }}) format("truetype");
font-weight: normal;
font-style: normal;
}
h1, h1 a, h2, h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a, #nav li a, div.title a, .headline, .subtitle {
font-family: 'FK Grotesk-Light' !important;
-moz-font-feature-settings: "ss03" on !important;
-webkit-font-feature-settings: "ss03" on !important;
font-feature-settings: 'ss03' on !important;
}
These steps have successfully changed some of the fonts on our site, but some elements are still rendering with the theme's default fonts "sans-serif" etc.
I want to change the fonts across the entire site, the proper way. It seems like the CSS variables need to somehow be changed, but I can't seem to make this work. Any help is appreciated.
Solved! Go to the solution
This is an accepted solution.
Hi all. Thank you for your offer to help.
I actually did solve this.
In the latest version of Baseline 2.0 theme code as of 11/10/2021 > Snippets > css-variables.liquid:
@font-face {
font-family: 'FK Grotesk-Thin';
src: url({{ "FKGrotesk-Thin.otf" | asset_url }}) format("opentype"),
url({{ "FKGrotes-Thin.woff" | asset_url }}) format("woff"),
url({{ "FKGrotesk-Thin.woff2" | asset_url }}) format("woff2"),
url({{ "FKGrotesk-Thin.ttf" | asset_url }}) format("truetype");
font-weight: normal;
font-style: normal;
}
{%- capture body_font_stack -%}"FK Grotesk-Light", {{ body_font.family }}, {{ body_font.fallback_families }}{%- endcapture -%}
{%- capture heading_font_stack -%}"FK Grotesk-Light", {{ heading_font.family }}, {{ heading_font.fallback_families }}{%- endcapture -%}
I can't confirm this is the best way of achieving this, but it has worked for my site so far with the smallest amount of new code I could manage.
The theme already calls the variables body_font_stack and heading_font_stack throughout to render fonts, so this seemed to work without bugs.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Did you happen to figure this out? I'm having the same issue :(...
This is an accepted solution.
Hi all. Thank you for your offer to help.
I actually did solve this.
In the latest version of Baseline 2.0 theme code as of 11/10/2021 > Snippets > css-variables.liquid:
@font-face {
font-family: 'FK Grotesk-Thin';
src: url({{ "FKGrotesk-Thin.otf" | asset_url }}) format("opentype"),
url({{ "FKGrotes-Thin.woff" | asset_url }}) format("woff"),
url({{ "FKGrotesk-Thin.woff2" | asset_url }}) format("woff2"),
url({{ "FKGrotesk-Thin.ttf" | asset_url }}) format("truetype");
font-weight: normal;
font-style: normal;
}
{%- capture body_font_stack -%}"FK Grotesk-Light", {{ body_font.family }}, {{ body_font.fallback_families }}{%- endcapture -%}
{%- capture heading_font_stack -%}"FK Grotesk-Light", {{ heading_font.family }}, {{ heading_font.fallback_families }}{%- endcapture -%}
I can't confirm this is the best way of achieving this, but it has worked for my site so far with the smallest amount of new code I could manage.
The theme already calls the variables body_font_stack and heading_font_stack throughout to render fonts, so this seemed to work without bugs.
You're an angel! THANK YOU.
@Rarify I'm having a terrible time trying to load custom fonts into Baseline. Am I missing something or does theme.liquid not exist anymore??
I last updated our theme (published the new developer release of the theme code) in December, don’t remember exactly when. Our codebase still uses theme.liquid and has worked just fine.
On my end, it’s in the “layout” directory.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024