Adding custom font and custom CSS has 'squashed' collection headings

Store Design
1

I’ve added a custom font and then changed the collection headings to use that font through custom CSS.

After the change, the collection name is now squashed - i.e. letters are overlapping and it’s not legible.

neon.PNG

It’s worked fine for other headings, such as on the contact page.

contact.PNG

Has anyone seen this before and can you help?

Thank you!

2

if the font is working fine on other pages (like the contact page) but causing overlap on collection headings, there are a few potential causes for this issue. Let’s go through the possible.

  1. Font Size or Line Height Issue

  2. Font Rendering Issue on Specific Elements

  3. Viewport or Container Width Issues

  4. Check for Overriding Global Styles

Let me know how it goes or if you need further assistance, feel free to reach out to me

1 Like
3

Thank you for the reply.

Using inspect element I’ve gone through and changed the things I can and none of them appear to fix it.

Changing the font size, line height make no difference. I can see that there’s a container div but it’s much larger than the font element.