Font not loading - Modular theme

Store Design
, ,

Topic summary

A user is experiencing issues with custom fonts not loading on their Shopify store using the Modular theme. They attempted to set ‘HW Left Regular’ as the primary font family, but it fails to load properly.

Current Status:

  • Custom font files are uploaded to the assets folder
  • The user followed the developer documentation for adding custom fonts
  • Initial troubleshooting attempt was unsuccessful

Diagnosis:

  • A respondent identified that the font file paths are missing or incorrect in the page source code
  • Screenshot evidence shows no related font paths are being generated

Suggested Solution:

  • Re-upload font files to the assets folder
  • Replace existing code with corrected font file names and paths
  • Verify proper file path references

Issue remains unresolved - the user confirmed they already have fonts uploaded and tried the suggested fix, but the problem persists. They’re seeking additional guidance on what might have been missed in the implementation.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hey there,

We are having some issues with our typeBasePrimary font not populating. We wanted to set our font-family as ‘HW Left Regular’ but it won’t pull in ‘Poppins’ for some reason.

Site link: https://alldayflavors.com/

Thank you for your help!

Code:

{%- liquid
  comment
    Fonts
  endcomment

  assign heading_font = settings.type_heading_font
  assign base_font = settings.type_base_font
  assign nav_font = settings.type_nav_font
  assign btn_font = settings.btn_font

  assign heading_font_bold = heading_font | font_modify: 'weight', 'bolder'
  assign base_font_bold = base_font | font_modify: 'weight', 'bolder'

  assign base_font_100 = base_font | font_modify: 'weight', '+100'
  assign base_font_200 = base_font | font_modify: 'weight', '+200'
  assign base_font_300 = base_font | font_modify: 'weight', '+300'
  assign base_font_400 = base_font | font_modify: 'weight', '+400'
  if base_font_100 and base_font_100.weight > base_font.weight
    assign base_font_bold = base_font_100
  elsif base_font_200 and base_font_200.weight > base_font.weight
    assign base_font_bold = base_font_200
  elsif base_font_300 and base_font_300.weight > base_font.weight
    assign base_font_bold = base_font_300
  elsif base_font_400 and base_font_400.weight > base_font.weight
    assign base_font_bold = base_font_400
  endif

  assign heading_font_100 = heading_font | font_modify: 'weight', '+100'
  assign heading_font_200 = heading_font | font_modify: 'weight', '+200'
  assign heading_font_300 = heading_font | font_modify: 'weight', '+300'
  assign heading_font_400 = heading_font | font_modify: 'weight', '+400'
  if heading_font_100 and heading_font_100.weight > heading_font.weight
    assign heading_font_bold = heading_font_100
  elsif heading_font_200 and heading_font_200.weight > heading_font.weight
    assign heading_font_bold = heading_font_200
  elsif heading_font_300 and heading_font_300.weight > heading_font.weight
    assign heading_font_bold = heading_font_300
  elsif heading_font_400 and heading_font_400.weight > heading_font.weight
    assign heading_font_bold = heading_font_400
  endif

  if nav_font == 'heading'
    assign nav_font = heading_font
    assign nav_font_bold = heading_font_bold
  else
    assign nav_font = base_font
    assign nav_font_bold = base_font_bold
  endif

  comment
    Colors
  endcomment
  assign color_text = settings.color_text_new
  assign color_background = settings.color_background_new
  assign color_background_brightness = color_background | color_brightness | round

  assign color_accent = settings.color_accent
  assign color_accent_text = '#fff'
  assign color_accent_brightness = color_accent | color_brightness | round
  if color_accent_brightness > 204
    assign color_accent_text = '#000'
  endif

  comment
    Use black text color if it is set to transparent
  endcomment
  if color_text == 'rgba(0,0,0,0)'
    assign color_text = 'rgba(0,0,0,1)'
  endif

  comment
    Use white background if it is set to transparent
  endcomment
  if color_background == 'rgba(0,0,0,0)'
    assign color_background = 'rgba(255,255,255,1)'
  endif

  comment
    Primary button colors
  endcomment
  assign color_button_primary_bg = settings.color_button_primary_bg
  assign color_button_primary_text = settings.color_button_primary_text

  comment
    Maximum color brightness is 255
    Change button text color to black if brightness is more than 85% ( 85% of 255 is ~215 )
    Change button border to match button text color in case button background is the same as the page body background
  endcomment

  comment
    Secondary button colors
  endcomment
  assign color_button_secondary_bg = settings.color_button_secondary_bg
  assign color_button_secondary_text = settings.color_button_secondary_text

  comment
    Badge
  endcomment
  assign color_badge_bg = settings.color_badge_bg
  assign color_badge_text = '#fff'
  assign color_badge_bg_brightness = color_badge_bg | color_brightness | round
  if color_badge_bg_brightness > 215
    assign color_badge_text = '#000'
  endif

  comment
    Table heading
  endcomment
  if color_background_brightness > 122
    assign color_background_accent = color_background | color_darken: 5
    assign color_background_table_header = color_background | color_darken: 50
  else
    assign color_background_accent = color_background | color_lighten: 5
    assign color_background_table_header = color_background | color_lighten: 50
  endif

  comment
    Search overlay opacity
  endcomment
  assign search_overlay_opacity = settings.search_overlay_opacity | times: 0.01 | round: 2
-%}

{%- style -%}

{%- comment -%} Typography {%- endcomment -%}
{{ heading_font | font_face: font_display: 'swap' }}
{{ base_font | font_face: font_display: 'swap' }}
{{ btn_font | font_face: font_display: 'swap' }}

{% if heading_font_bold %}
  {{ heading_font_bold | font_face: font_display: 'swap' }}
{% endif %}

{% if base_font_bold %}
  {{ base_font_bold | font_face: font_display: 'swap' }}
{% endif %}

{%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
{%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}

{% if base_font_italic %}
  {{ base_font_italic | font_face: font_display: 'swap' }}
{% endif %}

{% if base_font_bold_italic %}
  {{ base_font_bold_italic | font_face: font_display: 'swap' }}
{% endif %}

:root {
  --COLOR-BACKGROUND: {{ color_background }};
  --COLOR-BACKGROUND-ACCENT: {{ color_background_accent }};
  --COLOR-BACKGROUND-ALPHA-25: {{ color_background | color_modify: 'alpha', 0.25 }};
  --COLOR-BACKGROUND-ALPHA-35: {{ color_background | color_modify: 'alpha', 0.35 }};
  --COLOR-BACKGROUND-ALPHA-60: {{ color_background | color_modify: 'alpha', 0.6 }};
  --COLOR-BACKGROUND-OVERLAY: {{ color_background | color_modify: 'alpha', 0.9 }};
  --COLOR-BACKGROUND-TABLE-HEADER: {{ color_background_table_header }};
  --COLOR-HEADING: {{ settings.color_heading_new }};
  --COLOR-TEXT: {{ color_text }};
  --COLOR-TEXT-DARK: {{ color_text | color_saturate: 10 | color_darken: 15 }};
  --COLOR-TEXT-LIGHT: {{ color_text | color_mix: color_background, 70 }};
  --COLOR-TEXT-ALPHA-5: {{ color_text | color_modify: 'alpha', 0.05 }};
  --COLOR-TEXT-ALPHA-8: {{ color_text | color_modify: 'alpha', 0.08 }};
  --COLOR-TEXT-ALPHA-10: {{ color_text | color_modify: 'alpha', 0.1 }};
  --COLOR-TEXT-ALPHA-25: {{ color_text | color_modify: 'alpha', 0.25 }};
  --COLOR-TEXT-ALPHA-30: {{ color_text | color_modify: 'alpha', 0.3 }};
  --COLOR-TEXT-ALPHA-55: {{ color_text | color_modify: 'alpha', 0.55 }};
  --COLOR-TEXT-ALPHA-60: {{ color_text | color_modify: 'alpha', 0.6 }};
  --COLOR-LABEL: {{ color_text | color_modify: 'alpha', 0.8 }};
  --COLOR-INPUT-PLACEHOLDER: {{ color_text | color_modify: 'alpha', 0.5 }};
  --COLOR-CART-TEXT: {{ color_text | color_modify: 'alpha', 0.6 }};
  --COLOR-BORDER: {{ settings.color_border_new }};
  --COLOR-BORDER-ALPHA-8: {{ settings.color_border_new | color_modify: 'alpha', 0.08 }};
  --COLOR-BORDER-DARK: {{ settings.color_border_new | color_darken: 35 }};
  --COLOR-ERROR-TEXT: {{ settings.color_error_new }};
  --COLOR-ERROR-BG: {{ settings.color_error_new | color_modify:  'alpha', 0.05 }};
  --COLOR-ERROR-BORDER: {{ settings.color_error_new | color_modify: 'alpha', 0.25 }};
  --COLOR-BADGE-TEXT: {{ color_badge_text }};
  --COLOR-BADGE-BG: {{ color_badge_bg }};
  --COLOR-SEARCH-OVERLAY: {{ settings.search_overlay_color | color_modify: 'alpha', search_overlay_opacity }};

  --RADIUS: 0px;
  {% if settings.btn_border_style == 'rounded' %}
    --RADIUS: 3px;
  {% elsif settings.btn_border_style == 'pill' %}
    --RADIUS: 300px;
  {% endif %}

  /* === Button General ===*/
  --BTN-FONT-STACK: {{ btn_font.family }}, {{ btn_font.fallback_families }};
  --BTN-FONT-WEIGHT: {{ btn_font.weight | default: 400 }};
  --BTN-FONT-STYLE: {{ btn_font.style }};
  --BTN-FONT-SIZE: {{ settings.btn_size }}px;

  --BTN-LETTER-SPACING: {{ settings.btn_letter_spacing | divided_by: 1000.0 | append: 'em' }};
  --BTN-UPPERCASE: {% if settings.btn_caps %}uppercase{% else %}none{% endif %};

  /* === Button Primary ===*/
  --BTN-PRIMARY-BORDER-COLOR: {{ settings.btn_primary_border_color }};
  --BTN-PRIMARY-BG-COLOR: {{ color_button_primary_bg }};
  --BTN-PRIMARY-TEXT-COLOR: {{ color_button_primary_text }};

  {% assign btn_primary_brightness = color_button_primary_bg | color_brightness %}
  {% if btn_primary_brightness <= 65 %}
    --BTN-PRIMARY-BG-COLOR-BRIGHTER: {{ color_button_primary_bg | color_lighten: 20 }};
  {% else %}
    --BTN-PRIMARY-BG-COLOR-BRIGHTER: {{ color_button_primary_bg | color_darken: 10 }};
  {% endif %}

  /* === Button Secondary ===*/
  --BTN-SECONDARY-BORDER-COLOR: {{ settings.btn_secondary_border_color }};
  --BTN-SECONDARY-BG-COLOR: {{ color_button_secondary_bg }};
  --BTN-SECONDARY-TEXT-COLOR: {{ color_button_secondary_text }};

  {% assign btn_secondary_brightness = color_button_secondary_bg | color_brightness %}
  {% if btn_secondary_brightness <= 65 %}
    --BTN-SECONDARY-BG-COLOR-BRIGHTER: {{ color_button_secondary_bg | color_lighten: 20 }};
  {% else %}
    --BTN-SECONDARY-BG-COLOR-BRIGHTER: {{ color_button_secondary_bg | color_darken: 10 }};
  {% endif %}

  /* === Button White ===*/
  --TEXT-BTN-BORDER-WHITE: #fff;
  --TEXT-BTN-BG-WHITE: #fff;
  --TEXT-BTN-WHITE: #000;
  --TEXT-BTN-BG-WHITE-BRIGHTER: {{ '#fff' | color_darken: 10 }};

  /* === Button Black ===*/
  --TEXT-BTN-BG-BLACK: #000;
  --TEXT-BTN-BORDER-BLACK: #000;
  --TEXT-BTN-BLACK: #fff;
  --TEXT-BTN-BG-BLACK-BRIGHTER: {{ '#000' | color_lighten: 20 }};

  --COLOR-TAG-SAVING: {{ settings.color_saving_badge }};

  --COLOR-WHITE: #fff;
  --COLOR-BLACK: #000;

  --BODY-LETTER-SPACING: {{ settings.type_base_letter_spacing | append: 'px' }};
  --HEADING-LETTER-SPACING: {{ settings.type_heading_letter_spacing | append: 'px' }};
  --NAV-LETTER-SPACING: {{ settings.type_nav_letter_spacing | append: 'px' }};

  --BODY-FONT-FAMILY: 'HW Left Regular', {{ base_font.fallback_families }};
  --HEADING-FONT-FAMILY: 'HW Left Regular', {{ heading_font.fallback_families }};
  --NAV-FONT-FAMILY: {{ nav_font.family }}, {{ nav_font.fallback_families }};

  --BODY-FONT-WEIGHT: {{ base_font.weight | default: 400 }};
  --HEADING-FONT-WEIGHT: {{ heading_font.weight | default: 400 }};
  --NAV-FONT-WEIGHT: {{ nav_font.weight | default: 400 }};

  --BODY-FONT-STYLE: {{ base_font.style }};
  --HEADING-FONT-STYLE: {{ heading_font.style }};
  --NAV-FONT-STYLE: {{ nav_font.style }};

  --BODY-FONT-WEIGHT-MEDIUM: {{ base_font_medium.weight | default: 400 }};
  --BODY-FONT-WEIGHT-BOLD: {{ base_font_bold.weight | default: 700 }};
  --NAV-FONT-WEIGHT-MEDIUM: {{ nav_font_medium.weight | default: 400 }};
  --NAV-FONT-WEIGHT-BOLD: {{ nav_font_bold.weight | default: 700 }};

  --HEADING-FONT-WEIGHT-BOLD: {{ heading_font_bold.weight | default: 700 }};

  --FONT-ADJUST-BODY: {{ settings.type_base_size | divided_by: 100.0 }};
  --FONT-ADJUST-HEADING: {{ settings.type_heading_size | divided_by: 100.0 }};
  --FONT-ADJUST-NAV: {{ settings.type_nav_size | divided_by: 100.0 }};

  --IMAGE-SIZE: {{ settings.image_size | default: 'cover' }};
  --IMAGE-ASPECT-RATIO: {{ settings.image_aspect_ratio }};
  --IMAGE-ASPECT-RATIO-PADDING: {{ settings.image_aspect_ratio | times: 100 | append: '%' }};

  --PRODUCT-COLUMNS: {{ settings.products_columns | plus: 0 }};

  {%- comment -%} Grid Variables {%- endcomment -%}
  --COLUMNS: 2;
  --COLUMNS-MEDIUM: 2;
  --COLUMNS-SMALL: 1;
  --COLUMNS-MOBILE: 1;

  --icon-loading: url( "{{ 'loading.svg' | asset_url }}" );
  --icon-zoom-in: url( "{{ 'icon-zoom-in.svg' | asset_url }}" );
  --icon-zoom-out: url( "{{ 'icon-zoom-out.svg' | asset_url }}" );

  --header-height: 120px;
  --header-initial-height: 120px;
  --scrollbar-width: 0px;
  --collection-featured-block-height: none;

  /* font size x line height + top/bottom paddings */
  --announcement-height-default: calc(0.8rem * var(--FONT-ADJUST-BODY) * 1.5 + 14px);
  --announcement-height-desktop: 0px;
  --announcement-height-mobile: 0px;

  {% comment %} Static variables {% endcomment %}
  --color-placeholder-bg: #ABA9A9;
  --color-placeholder-fill: rgba(246, 247, 255, 0.3);

  --swatch-size: 22px;

  {% comment %} Dynamic variables {% endcomment %}
  --overlay-color: #000;
  --overlay-opacity: 0;

  {% comment %} Specify spacing between two inline-block grid elements {% endcomment %}
  --gutter: 10px;
  --gap: 10px;
  --outer: 10px;
  --outer-offset: calc(var(--outer) * -1);

  {% comment %} Aos animations {% endcomment %}
  --move-offset: 20px;

  {% comment %} Parallax {% endcomment %}
  --PARALLAX-STRENGTH-MIN: {{ settings.parallax_strength | plus: 100.0 | append: '%' }};
  --PARALLAX-STRENGTH-MAX: {{ settings.parallax_strength | plus: 110.0 | append: '%' }};

  {% comment %} Math PI number {% endcomment %}
  --PI: 3.14159265358979
}
  /* -- code to use HW Left font-family in theme -- */
 @font-face {   
    font-family: 'HW Left Regular';  
          src: 	url('{{ "HW Left Regular.eot" | https://cdn.shopify.com/s/files/1/0550/0924/7476/files/HW_Left_Regular.eot?v=1717095503 }}');   
          src: 	url('{{ "HW Left Regular.eot" | https://cdn.shopify.com/s/files/1/0550/0924/7476/files/HW_Left_Regular.eot?v=1717095503 }}#iefix') format("embedded-opentype"),
        	url('{{ "HW Left Regular.woff" | https://cdn.shopify.com/s/files/1/0550/0924/7476/files/HW_Left_Regular.woff?v=1717095503 }}') format("woff"),
        	url('{{ "HW Left Regular.woff2" | https://cdn.shopify.com/s/files/1/0550/0924/7476/files/HW_Left_Regular.woff2?v=1717095503 }}') format("woff2"),
         font-weight: normal;
         font-style: normal;
 } /* - end - */
{%- endstyle -%}
2

Hi @joansu

I gues you added the wrong path for your custom font files, because i can see in the page code source there are no related path for the fonts refer to the sreenshot below

2024-06-20 12_28_48-https___alldayflavors.com_ — Mozilla Firefox.png
2024-06-20 12_28_48-https___alldayflavors.com_ — Mozilla Firefox.png806×158 6.09 KB

I suggest you to upload fonts files in your asset folder and replace below code with your font file names and add it again hopefully it will resolve your issue.

Thanks

3

Hey @Liquid_xPert_SJ

Thank you for your suggestion! We do have the font uploaded to assets, and I tried to replace the code as suggested, but it didn’t solve the issue, unfortunately. I followed the developer’s documentation and wondered if I missed anything.

1 Like