Why isn't my custom font working with the Split theme?

Technical Q&A
1

Hi, I am using the Split theme and trying to add a custom font, PMGrotesk. I have added some code to my css file, and I uploaded the font files as assets. Here is what I added to the css file. The URLs match the files that I uploaded. I’ve references a few different guides and I think that I’m following the steps correctly but when I try to use the font it doesn’t work.

/*============================================================================
  #Fonts
==============================================================================*/ 

// Headings

@font-face {
  font-family: "PMGrotesk";
  src: url('{{ "PMGrotesk-Light.otf" | asset_url }}') format("opentype");
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "PMGrotesk";
  src: url('{{ "PMGrotesk-Regular-1.woff" | asset_url }}') format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "PMGrotesk";
  src: url('{{ "PMGrotesk-Medium.otf" | asset_url }}') format("opentype");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "PMGrotesk";
  src: url('{{ "RTGravi-Soft.otf" | asset_url }}') format("opentype");
  font-style: normal;
  font-weight: 700;
}
      
//PMGrotesk-Bold.otf" | asset_url }}') format("opentype");

{{ settings.typography_headings_new | font_face }}

{% assign header_font = settings.typography_headings_new %}
$font-stack-header: 'PMGrotesk', {{ header_font.family }}, {{ header_font.fallback_families }};
$font-weight-header: 700, {{ header_font.weight }};
$font-style-header: normal, {{ header_font.style }};

@mixin font-head(){
  font-family: $font-stack-header;
  font-weight: $font-weight-header;
  font-style: $font-style-header;
  text-transform: uppercase;
}

// Body (main)

{% assign body_font = settings.typography_body_new %}
{{ body_font | font_face }}

$font-stack-body: 'PMGrotesk', {{ body_font.family }}, {{ body_font.fallback_families }};
$font-weight-body: 400, {{ body_font.weight }};
$font-style-body: normal, {{ body_font.style }};

{%- assign body_font_bold = body_font | font_modify: 'weight', 'bolder' -%}
{%- assign body_font_italic = body_font | font_modify: 'style', 'italic' -%}
{%- assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic' -%}

$bodyFontBoldWeight: 700;
{%- if body_font_bold -%}
  {{ body_font_bold | font_face }}
  $bodyFontBoldWeight: 700; 
{%- endif -%}

{%- if body_font_italic -%}
  {{ body_font_italic | font_face }}
{% endif %}

{%- if body_font_bold_italic -%}
  {{ body_font_bold_italic | font_face }}
{%- endif -%}

@mixin font-body(){
  font-family: $font-stack-body;
  font-weight: $font-weight-body;
  font-style: $font-style-body;
}

// Logo & menus

{% assign menu_font = settings.typography_menus_new %}
{{ menu_font | font_face }}

$font-stack-menu: 'PMGrotesk', {{ menu_font.family }}, {{ menu_font.fallback_families }};
$font-weight-menu: 500, {{ menu_font.weight }};
$font-style-menu: normal, {{ menu_font.style }};

$menuFontRegularWeight: 500, {{ menu_font.weight }};

{% assign menu_font_bold = menu_font | font_modify: 'weight', '700' %}

$menuFontBoldWeight: 700;
{% if menu_font_bold %}
  {{ menu_font_bold | font_face }}
{% else -%}
  {% assign menu_font_bold = menu_font | font_modify: 'weight', 'bolder' %}
  {{ menu_font_bold | font_face }}
{% endif %}
{% if menu_font_bold %}
  $menuFontBoldWeight: {{ menu_font_bold.weight }}; 
{% endif %}

@mixin font-menu(){
  font-family: $font-stack-menu;
  font-weight: $font-weight-menu;
  font-style: $font-style-menu;
}

// Special

{{ settings.typography_quote_new | font_face }}

{% assign quote_font = settings.typography_quote_new %}
$font-stack-quote: 'PMGrotesk', {{ quote_font.family }}, {{ quote_font.fallback_families }};
$font-weight-quote: 300, {{ quote_font.weight }};
$font-style-quote: normal, {{ quote_font.style }};

$quoteFontRegularStyle: {{ quote_font.style }};
{% if quote_font.style == 'italic' %}
  {%- assign quote_font_normal = quote_font | font_modify: 'style', 'normal' -%}
  {{ quote_font_normal | font_face }}
  $quoteFontRegularStyle: normal;
{% endif %}

@mixin font-quote(){
  font-family: $font-stack-quote;
  font-weight: $font-weight-quote;
  font-style: $font-style-quote;
}
2

There some problems in your code.

First of all each @font-face font-family name should be different, if you load different fonts.

You should name them “PMGrotesk Light”, “PRMGrotesk Regular” and so on.

Also the last @font-face definition use a different font, called RTGravi-Soft

In addition check @font-face specs, and I suggest you to just use WOFF format if you have it, the browser coverage is very high and eventually also add WOFF2 if you have.

2 Likes
3

@jdn7d

Here’s a step-by-step, detailed tutorial about how to add custom fonts to any Shopify Theme, it may help you. Let me know if this doesn’t solve the issue.

Kind regards,
Diego

1 Like
4

Thanks Diego. I’ve made some changes but when I’m still unable to use the font in my css. I edited the CSS as follows. The files I uploaded are titled PMGrotesk-Medium.woff and so on, so I think I added it correctly.

@font-face {
  font-family: "PMGrotesk Light";
  src: url('{{ "PMGrotesk-Light.otf" | asset_url }}') format("opentype");
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: "PMGrotesk Regular";
  src: url('{{ "PMGrotesk-Regular-1.woff" | asset_url }}') format("woff"),
       url('{{ "PMGrotesk-Regular-1.woff2" | asset_url }}') format("woff2");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "PMGrotesk Medium";
  src: url('{{ "PMGrotesk-Medium.woff" | asset_url }}') format("woff"),
       url('{{ "PMGrotesk-Medium.woff2" | asset_url }}') format("woff2");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "RTGravi Soft Soft";
  src: url('{{ "rtgravi-soft-webfont.woff2" | asset_url }}') format("woff2"),
       url('{{ "RTGravi-Soft.otf" | asset_url }}') format("opentype");
  font-style: normal;
  font-weight: 700;
}
5

j7,

I think you were more right before, your different typefaces of the same font should all have the same “font-family” name, eg

@font-face {
    font-family: "PMGrotesk";
    font-weight: 300;
    src: /* your-source */
    ....
}
@font-face {
    font-family: "PMGrotesk";
    font-weight: 400;
    ...
}

Other than that, fonts can fail for all sorts of reasons, so I thought I’d share how I debug fonts.

  1. Open the Web Inspector in chrome/safari/firefox (command + I), and highlight a text element that I expect to use a custom font, say a heading.
  2. Check the “computed” tab for that element in the element inspector. It will have a font-family property, and make sure it’s set to my custom font.
  3. If the computed font-family is correctly set to my custom font, I check the “Network” tab of the inspector to see if the font is trying to load, but failing (this would suggest incorrect URLs in my stylesheet).
  4. If there are no 404 errors for the font file, that means that the browser isn’t loading the @font-face rule, so I inspect my css file in the Web Inspector to make sure there’s no malformed syntax.
  5. On shopify, the last thing I try is renaming the asset files to invalidate the cache.

My only other advice would be to only use WOFF/WOFF2 font formats. They fulfill pretty much every need and load fast. I use transfonter to convert into these formats.

6

Hi Evan, thank you very much that was helpful. I see now there I am getting a 404 error. I’ve tried the browser url for the font file, as well as the name of the file. I’m not sure what URL I should be adding here. DO you have advice on how to figure that out?

7

@jdn7d

For the sake of simplicity, I’d recommend uploading your fonts to settings > files instead of the theme’s assets. This will make your life easier giving you one single, concrete URL.

diego_ezfy_0-1628702537171.png
diego_ezfy_0-1628702537171.png1297×683 54.6 KB

1 Like