How to implement custom fonts in the Baseline 2.0 theme?

Store Design
1

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.

1 Like
2

@Rarify

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

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

4

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

2 Likes
5

You’re an angel! THANK YOU.

6

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

7

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.