My Font Is Showing Code Where Characters Should Be - HELP!

Shopify Discussion

Topic summary

A user encountered a display issue where their custom font “Sergio Trendy” was showing code characters (like ‘kk’) instead of special characters (like ‘%’). The problem stemmed from improperly nested HTML structure in their theme.liquid file.

Resolution:
Another user (PaulNewton) identified that HTML elements were not properly nested within <html></html> and <body></body> tags. After correcting the nesting structure, the character display issue was resolved.

Follow-up Issue:
The original poster then asked how to limit the custom font to headings only, rather than applying it to both headings and body copy. This question appears to remain unanswered in the current thread.

The discussion demonstrates a common theme customization challenge where incorrect HTML structure caused font rendering problems.

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

Please can anyone help? I have used the below code which means the font works outside of preview and online but sadly anytime I use a character it does not show and shows ‘‘kk’’. rather than ‘’%‘’ for example. ( See ref attached).

The code is below is currently in theme liquid

{%- if settings.predictive_search_enabled -%}

{%- endif -%}

@font-face { font-family: 'SergioTrendy-Regular'; src: url('[https://cdn.shopify.com/s/files/1/0612/7756/9224/files/Sergio_Trendy.woff2?v=1700283535](https://cdn.shopify.com/s/files/1/0612/7756/9224/files/Sergio_Trendy.woff2?v=1700283535)') format('woff2'); } ![laurenamberreyn_0-1703949315758.png|994x102](upload://18ICSrLZQOjFtW4ObZeUoimjDi3.png)
2

Keep html nested inside the and tags

Then try again.

3

That worked!!! Thank you so so much

4

Hi Paul,

Currently my custom font ‘‘Sergio Trendy’’ seems to apply to headings and body copy. Do you know how I change this so I have normal font for Body Copy - not Sergio Trendy?

Thank you!! Lauren

5

};

{%- if settings.predictive_search_enabled -%}

{%- endif -%} @font-face { font-family: 'SergioTrendy-Regular'; src: url('[https://cdn.shopify.com/s/files/1/0612/7756/9224/files/Sergio_Trendy.woff2?v=1700283535](https://cdn.shopify.com/s/files/1/0612/7756/9224/files/Sergio_Trendy.woff2?v=1700283535)') format('woff2'); }