Weird font behavior in different browsers

[valzubkov]

This is not a technical issue
I just really like this project, and want to share my thoughts on font formatting logic

There is a chain of font formatting overrides across the styling system:
– layout font injection
– tailwind config
– css variables
– tailwind prose

Somewhere along this chain the initial font weight properties (bold, medium, normal etc) are being logically overridden

It leads to the situation when in different browsers fonts displayed with different weights
But more importantly, the fonts (especially bold ones) are becoming a bit glitchy

It can be easily testes right here, no need to build and run anything: https://ariadocs.vercel.app

All you need to do is to open in Safari, zoom into the hero title, and then select/deselect several letters
You will then see that font weight properties are "jumping" slightly

You can also observe that some letters are being "squeezed", ad per screenshot:
This is screenshot form https://ariadocs.vercel.app

On this screenshot from the Google Fonts I'm showing that the same letter ("I") in the same font is not being squeezed:
This is screenshot form Google Fonts

So what I did about it:
– removed all the overrides
– set the prose:headings-//my value for the docs and blog part
– manually set the desired font weight as tailwind utility in other components

That's an easy fix, hope it can help!

Cheers and thanks for the great job!