The letters L, M, N, and P in Alegreya (Bold) font are appearing gray? No clue why or how to fix it, help please!

Hi everyone!

I am experiencing a weird issue on my website (radabard.com if anyone wants to see the issue in action). The letters L, M, N, and P in the Alegreya font appear gray when set to bold. I did not experience this issue with Alegreya Sans, so I am guessing its font-specific. I am attaching a screenshot below. Is there anything I can do from my end, or does a dev need to take a look at this? Thank you!

When you look at them closely, you see that there is a white outline in some letters.

And they look like gray when zoomed out:
image

It is noted here in this StackOverflow but I couldn’t replicate it myself though. Maybe in your app, you do something weird with CSS or fonts or some custom HTML :slight_smile:

I don’t do any CSS or custom HTML. The only plugins I use are Google Material Icons and Iconify. No clue where this issue is coming from.

Is there a way to use the code in that link to make the issue disappear in my app? Do I have to modify it in any way?

Weird…
Have you tested your website in different browsers to see if the issue is browser-specific ?
Have you considered using a different weight ?

The issue is that I have thousands of words of rich text using the [b] tag which would be VERY impractical to edit to be changes in text weight instead, and I cannot find a font which is free for commercial use and as close to what is used in the 1st party materials that my 3rd party content is trying to match as Alegreya.

The issue happens in both Chrome and Edge.

This topic was automatically closed after 14 days. New replies are no longer allowed.