["Baseline" 2.0 Theme] Custom fonts?

Solved
Rarify
Tourist
5 1 3

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)

Accepted Solutions
Rarify
Tourist
5 1 3

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 4 (4)
KetanKumar
Shopify Partner
24918 2497 9034

@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
New Member
6 0 0

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

Rarify
Tourist
5 1 3

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

1015
New Member
6 0 0

You're an angel! THANK YOU.