Why is my custom font not rendering correctly in navigation?

chels_grove
Shopify Partner
58 0 20

Hi All - I have used custom fonts quite frequently but running into an issue on one site. Usually I put something that the bottom of theme.css.liquid with font face and using !important but this time the font in the navigation is not rendering correctly. It's changing something, but not the font I want. I think it's somewhere lying in two snippet files, I have a css-variables.liquid and a font-face.liquid that I have never used before. Could someone look at these and let me know what tweak I need to make? And yes those are the correct font file names!

 

My theme.css.liquid (threw in all the random nav things just to see if something would stick):

 

  @font-face {
  font-family: 'tt_lakes_neue_condensed_bold';
  src: url('tt_lakes_neue_condensed_bold-webfont.woff') format('woff'), 
      url('tt_lakes_neue_condensed_bold-webfont.woff2') format('woff2');
  font-weight: normal;
    font-style: normal;
  font-display: block;
}

.navigation, .site-nav__item, .site-header.site-header--heading-style, .header-item.header-item--navigation, .site-nav__link, .site-nav__link.site-nav__link--has-dropdown, .site-nav__link.site-nav__link--underline.site-nav__link--has-dropdown, .site-nav__details { font-family: ‘tt_lakes_neue_condensed_bold’, sans-serif !important; }

 

 

This is what is in the css-variables.liquid:

 

{%- style -%}

  :root {
    --typeHeaderPrimary: cheddar-gothic-rough, sans-serif;
    --typeHeaderFallback: {{ settings.type_header_font_family.fallback_families }};
    --typeHeaderSize: {{ settings.type_header_base_size | default: '32' | append: 'px' }};
    --typeHeaderWeight: 400;
    --typeHeaderLineHeight: {{ settings.type_header_line_height | default: 1.4 }};
    --typeHeaderSpacing: {{ settings.type_header_spacing | default: '25' | divided_by: 1000.00 | append: 'em' }};

    --typeSubHeaderPrimary: tt_lakes_neue_condensed_bold, sans-serif;
    --typeSubHeaderWeight: normal;

    --typeHeaderRoughPrimary: cheddar-gothic-rough, sans-serif;
    --typeHeaderRoughFallback: {{ settings.type_header_font_family.fallback_families }};
    --typeHeaderRoughSize: {{ settings.type_header_base_size | default: '32' | append: 'px' }};
    --typeHeaderRoughWeight: 400;
    --typeHeaderRoughLineHeight: {{ settings.type_header_line_height | default: 1.4 }};
    --typeHeaderRoughSpacing: {{ settings.type_header_spacing | default: '25' | divided_by: 1000.00 | append: 'em' }};

    --typeBasePrimary: filson-pro, sans-serif;;
    --typeBaseFallback:{{ settings.type_base_font_family.fallback_families }};
    --typeBaseSize: {{ settings.type_base_size | default: 16 | append: 'px' }};
    --typeBaseWeight: 400;
    --typeBaseSpacing: {{ settings.type_base_spacing | default: '50' | divided_by: 1000.00 | append: 'em' }};
    --typeBaseLineHeight: {{ settings.type_base_line_height | default: 1.4 }};

    --typeCollectionTitle: {{ settings.type_collection_size | append: 'px' }};

    --colorLightText: #818284;

    --colorNeutralOne: #58595B;
    --colorNeutralTwo: #818284;
    --colorNeutralThree: #BCBEC0;
    --colorNeutralFour: #F1F2F2;


    --iconWeight: {{ settings.icon_weight | default: '5px' }};
    --iconLinecaps: {{ settings.icon_linecaps | default: 'miter' }};

    {% if settings.button_style == 'round-slight' %}
      --buttonRadius: 3px;
    {% elsif settings.button_style == 'round' %}
      --buttonRadius: 50px;
    {% else %}
      --buttonRadius: 0px;
    {% endif %}

    --colorGridOverlayOpacity: {{ settings.collection_grid_opacity | divided_by: 100.0 }};
  }
}
{%- endstyle -%}

 

 

And font-face.liquid:

 

{%- assign header_font = settings.type_header_font_family -%}
{%- assign base_font = settings.type_base_font_family -%}
{%- assign base_font_bold = base_font | font_modify: 'weight', '600' -%}
{%- assign base_font_italic = base_font | font_modify: 'style', 'italic' -%}
{%- assign base_font_bold_italic = base_font_bold | font_modify: 'style', 'italic' -%}

{%- style -%}
  {{ header_font | font_face: font_display: 'swap' }}
  {{ base_font | font_face: font_display: 'swap' }}

  {{ base_font_bold | font_face: font_display: 'swap' }}
  {{ base_font_italic | font_face: font_display: 'swap' }}
  {{ base_font_bold_italic | font_face: font_display: 'swap' }}
{%- endstyle -%}

 

  

Replies 0 (0)