Why is my custom font not rendering correctly in navigation?

Store Design
, , ,

Topic summary

A developer is troubleshooting custom font implementation in a Shopify theme’s navigation menu. Despite using their usual method of adding @font-face declarations with !important in theme.css.liquid, the TT Lakes Neue Condensed Bold font isn’t rendering correctly in the navigation—something changes, but not to the intended font.

Key technical details:

  • Custom font files (WOFF and WOFF2 formats) are correctly named and referenced
  • Multiple CSS selectors targeting navigation elements have been tried
  • The theme contains two unfamiliar snippet files: css-variables.liquid and font-face.liquid

Suspected issue:
The developer believes CSS variable definitions in these snippet files may be overriding the custom font declarations, as the theme appears to use CSS custom properties (e.g., --typeHeaderPrimary) for font management.

Current status:
The post includes code snippets from theme.css.liquid and css-variables.liquid (though the latter appears corrupted/reversed in the provided text). The developer is seeking guidance on which file requires modification to properly implement the custom navigation font.

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

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 -%}