We have recently noticed random text being displayed in the drop down menus of our website (Numeral 4 outlined) as well as the bottom of our footer (ADMPV outlined). We cannot diagnose where this is coming from. We have not made any changes to our site since July and this issue has seemed to crop up more recently. Any help would be appreciated. Photos attached for reference.
Topic summary
Issue Identified:
Random text characters are appearing in website navigation dropdown menus (numeral “4”) and footer (“ADMPV”), replacing what should be icon symbols. Investigation revealed these were previously functional icons: down arrow, shopping cart, and credit card symbols.
Root Cause:
Missing or broken icon font files in the Supply theme. The font file URLs may be hard-coded instead of using Shopify’s liquid asset_url filter, causing the links to break.
Proposed Solution:
- Locate the
timber-mini.css(ortimber.css.liquid) file - Find the
@font-facedeclaration for icon fonts at the top - Update hard-coded URLs to use liquid format:
{{ "icons.eot" | asset_url }} - Apply this pattern to all icon font formats (.eot, .woff, .ttf, .svg)
- If not a
.liquidfile, extract the font-face declaration into an inline<style>tag in the theme.liquid file
Current Status:
User shared their timber.css.liquid code (which appears corrupted/reversed in the post). The conversation appears incomplete, with the final question about resolution unanswered.
Looks like there’s supposed to be font files that includes icons for the theme but these font files are missing. If they still exist in the theme Assets folder, you may need to update the links to these files. These font URLs may be hard-coded instead of using liquid asset_url filter.
We have found that the #4 used to be a down arrow icon, the bracket in the add to cart used to be a shopping cart icon, and the text letters at the bottom were credit card icons.
We are running a the Supply theme in Shopify, not sure how these files are missing since we have not added or removed anything.
Forgive my naivety on the subject, but how would I go about updating the links to the files if running a blanket theme with Shopify?
Look in the ‘timber-mini.css’ file. At the top there are URLs for the icon fonts. If the file is a ‘.liquid’ file, you can update the hard-coded URLs to this format:
{{ “icons.eot” | asset_url }}
{{ “icons.woff” | asset_url }}
etc.
If it’s not a ‘.liquid’ file, you can take this font-face declaration out of that file and put it into an inline tag in theme.liquid
I have this code in timber.css.liquid
/================ Typography ================/
/============================================================================
Get font-families from theme settings
==============================================================================/
{% if settings.type_base_family contains ‘Google’ %}
{% assign type_base_parts = settings.type_base_family | split: ‘_’ %}
{% assign type_base_name = type_base_parts[1] %}
{% capture base_family %}“{{ type_base_name | split: ‘:’ | first | replace: ‘+’, ’ ’ }}”{% if type_base_parts.last == ‘serif’ %}, serif {% else %}, “HelveticaNeue”, “Helvetica Neue”, sans-serif{% endif %}{% endcapture %}
{% else %}
{% assign base_family = settings.type_base_family %}
{% endif %}
{% if settings.type_header_family contains ‘Google’ %}
{% assign type_header_parts = settings.type_header_family | split: ‘_’ %}
{% assign type_header_name = type_header_parts[1] %}
{% capture header_family %}“{{ type_header_name | split: ‘:’ | first | replace: ‘+’, ’ ’ }}”{% if type_header_parts.last == ‘serif’ %}, serif {% else %}, “HelveticaNeue”, “Helvetica Neue”, sans-serif{% endif %}{% endcapture %}
{% assign header_weight = type_header_parts[2] %}
{% else %}
{% assign header_family = settings.type_header_family %}
{% assign header_weight = 700 %}
{% endif %}
{% if settings.type_accent_family contains ‘Google’ %}
{% assign type_accent_parts = settings.type_accent_family | split: ‘_’ %}
{% assign type_accent_name = type_accent_parts[1] %}
{% capture accent_family %}“{{ type_accent_name | split: ‘:’ | first | replace: ‘+’, ’ ’ }}”{% if type_accent_parts.last == ‘serif’ %}, serif {% else %}, “HelveticaNeue”, “Helvetica Neue”, sans-serif{% endif %}{% endcapture %}
{% assign accent_weight = type_accent_parts[2] %}
{% else %}
{% assign accent_family = settings.type_accent_family %}
{% assign accent_weight = 500 %}
{% endif %}
// Header Font
$headerFontStack: {{ header_family }};
$headerFontWeight: {{ header_weight }};
// Body Font
$bodyFontStack: {{ base_family }};
$baseFontSize: {{ settings.type_base_size }};
// Navigation and Button Font
$accentFontStackBold: {{ accent_family }};
$accentFontWeight: {{ accent_weight }};
// Icons
@font-face {
font-family: “icons”;
src: url(’ {{ “icons.eot” | asset_url }} ‘);
src: url(’ {{ “icons.eot” | asset_url }}?#iefix ‘) format(“embedded-opentype”),
url(’ {{ “icons.woff” | asset_url }} ‘) format(“woff”),
url(’ {{ “icons.ttf” | asset_url }} ‘) format(“truetype”),
url(’ {{ “icons.svg” | asset_url }}#timber-icons ') format(“svg”);
font-weight: normal;
font-style: normal;
}
$socialIconFontStack: ‘icons’;
Looks like you were able to resolve this?

