How to disable webfont ligatures & alternates?

Community resources Product feedback
1

Hey everyone :slight_smile:

I need some help disabling ligatures & alternates globally on my Webflow site.
Is that possible?

I’m using a webfont that has rather useless alternates for my use case, but it seems like they are enabled per default, resulting in some bad looking text. Check it out here.
(First subheadline: “We are the Beowulf Co.” the “U” in BEOWULF is slanted. Buttons-Copy just below: Second to last line, “INSIDE” has a slanted “I”)

I’ve of course Googled it, but I’m so freaking bad at CSS, I honestly don’t know what I’m doing. I’ve tried adding

.Subheadline {
font-variant-ligatures: none;
}

in the “Footer Code” section of the Project Settings > Custom Code, to check if that influenced my Subheadline class, but that did nothing.
Ideally, I want it disabled site-wide with just one line of code, so I don’t have to write up all my classes manually.

I hope there’s someone out there who can point me in the right direction.

Thanks a bunch in advance
Best,
Jacob

2

You can put the code in the page to see the effects in the designer, or at page level but you’ll see the results only on publish. At page or site level, place the code in the Head part, in between style tags.

image
image1003×480 104 KB

1 Like
4

Vincent, thank you so much!
You’re the boss.

Have a great day!

1 Like