Why isn't my typeBasePrimary font displaying in Streamline theme?

Store Design
, ,

Topic summary

A user is experiencing issues with the ‘Nuform Sans’ custom font not displaying when set as typeBasePrimary in the Streamline theme, while typeHeaderPrimary (using ‘GTAlpina’) works correctly.

Technical Details:

  • The @font-face declaration appears to have malformed src URLs mixing Liquid template syntax with hardcoded CDN paths
  • CSS custom properties show --typeBasePrimary and --typeBaseFallback both set to ‘Nuform Sans’
  • Much of the provided CSS code appears corrupted or reversed (text displayed backwards)

Proposed Solution:
A PageFly support representative suggests adding code to theme.liquid above the </head> tag:

  1. Navigate to Online Stores > Themes > Actions > Edit code
  2. Click on theme.liquid and paste the code above </head>

However, the actual solution code provided in the response also appears corrupted/reversed, making it unclear what the exact fix should be. The issue likely stems from incorrect font file URL syntax in the original @font-face declaration.

Summarized with AI on November 10. 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 typeBasePrimary font as ‘Nuform Sans’ but it won’t pull for some reason. We have no issue with typeHeaderPrimary however.

Site link: https://eatcozumi.com/

Code:

@font-face {
  font-family: "Nuform Sans";
  src: url('{{ "NuformSans-Medium.woff2" | https://cdn.shopify.com/s/files/1/0624/9077/1626/files/NuformSans-Medium.woff2?v=1711727437}}') format("woff2"),
       url('{{ "NuformSans-Medium.woff2" |  https://cdn.shopify.com/s/files/1/0624/9077/1626/files/NuformSans-Medium.woff?v=1711727437}}') format("woff");
}
   @font-face {
  font-family: "GTAlpina";
  src: url('{{ "GTAlpina.woff2" | https://cdn.shopify.com/s/files/1/0624/9077/1626/files/GTAlpina.woff2?v=1711727437}}') format("woff2"),
       url('{{ "GTAlpina.woff2" | https://cdn.shopify.com/s/files/1/0624/9077/1626/files/GTAlpina.woff?v=1711727438}}') format("woff");
}
  :root {
    --typeHeaderPrimary: 'GTAlpina';
    --typeHeaderFallback: 'GTAlpina';
    --typeHeaderSize: {{ settings.type_header_base_size | default: 32 | append: 'px' }};
    --typeHeaderStyle: {{ settings.type_header_font_family.style }};
    --typeHeaderWeight: normal;
    --typeHeaderLineHeight: {{ settings.type_header_line_height | default: 1.4 }};
    --typeHeaderSpacing: {{ settings.type_header_spacing | default: '25' | divided_by: 1000.00 | append: 'em' }};

    --typeBasePrimary:'Nuform Sans';
    --typeBaseFallback:'Nuform Sans';
    --typeBaseSize: {{ settings.type_base_size | default: 16 | append: 'px' }};
    --typeBaseWeight: 500;
    --typeBaseStyle: {{ settings.type_base_font_family.style }};
    --typeBaseSpacing: {{ settings.type_base_spacing | default: '50' | divided_by: 1000.00 | append: 'em' }};
    --typeBaseLineHeight: {{ settings.type_base_line_height | default: 1.6 }};

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

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

Hi @joansu

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly