Font not loading - Modular theme

Font not loading - Modular theme

joansu
Tourist
7 0 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 -%}

 

Replies 2 (2)

Liqiud_xPert_SJ
Shopify Partner
1031 125 155

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

 

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.

<style> 
@font-face {
  font-family: 'Your Font Name';
  src: url('{{ 'YourFontFileName.woff' | asset_url }}');
}
</style> 

 

Thanks

 

 

 

 

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
joansu
Tourist
7 0 1

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