Solved

["Baseline" 2.0 Theme] Custom fonts?

Rarify
Tourist
9 1 4

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:

  • added font files to "assets" directory
  • added the following code to the bottom of theme.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;
}

@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.

Accepted Solution (1)
Rarify
Tourist
9 1 4

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:

  • I inserted my fonts using font-face at the bottom of the file:

 

@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;
 }

 

  • Note that this is within existing <style> </style> tags.
  • Next, I located where the liquid variables body_font_stack and heading_font_stack were initialized. This was around line 243 for me in the same file.
  • I added my custom fonts to the beginning of the stack, so they are always rendered first. I retained the existing stack as a fallback:

 

{%- 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.

View solution in original post

Replies 6 (6)

KetanKumar
Shopify Partner
36839 3635 11972

@Rarify 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

1015
Tourist
9 0 1

Did you happen to figure this out? I'm having the same issue :(...

Rarify
Tourist
9 1 4

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:

  • I inserted my fonts using font-face at the bottom of the file:

 

@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;
 }

 

  • Note that this is within existing <style> </style> tags.
  • Next, I located where the liquid variables body_font_stack and heading_font_stack were initialized. This was around line 243 for me in the same file.
  • I added my custom fonts to the beginning of the stack, so they are always rendered first. I retained the existing stack as a fallback:

 

{%- 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.

1015
Tourist
9 0 1

You're an angel! THANK YOU.

Caus
Visitor
2 0 0

@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??

Rarify
Tourist
9 1 4

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.