A user is troubleshooting why their imported BebasNeue font displays as Barlow Condensed instead, despite Chrome DevTools showing the font-family rule is applied. They’ve tried multiple font sources and added @font-face declarations in both base.css and theme.liquid as backup.
Proposed solutions:
Key clarification: The DevTools screenshot only shows the CSS rule is applied, not that the font successfully loaded. The “Rendered Fonts” section at the bottom of the DevTools pane reveals which font actually displays.
The issue remains unresolved pending implementation of these debugging steps.
I have spent hours trying to get to the bottom of this
This is from ChromeDev. Showing font-family BebasNeue is being loaded
However the fonts are still showing Barlow condesnsed
base.css file
theme.liquid (backup in case base.css doesn’t work)
I tried downloading BebasNeue font from 2 different websites.
Nothing has worked. What could be the issue?
Hello @arorar ,
Font files path
If this one not working upload fonts under files and then connect theme like this
@font-face {
font-family: 'font-name';
src: url('https://cdn.shopify.com/s/files/files/your-font.woff?v=1706767377') format('woff'),
url('https://cdn.shopify.com/s/files/files/your-font.woff2?v=1706767377') format('woff2');
}
Regards
Guleria
Check your Dev console – does it have any warning similar to this topic – https://community.shopify.com/c/technical-q-a/has-anyone-else-had-issues-with-corrupted-woff-or-woff2-files/m-p/1732103 ?
Solution is also mentioned there – upload to Files and use file_url filter instead.
Also – assets/*.css files do not process liquid and do not recognize … – your best bet would be to put that code into “Custom liquid” section added to Footer section group.
Finally – screenshot does not mean the font is loaded. It means that there is a rule to use this font for this element, but nothing about it being loaded. It’s instruction, not confirmation.
If you scroll this pane to the bottom you would see what actual font is used to output this element under Rendered Fonts:
