Default `font-family` (no custom fonts) on linux (Ubuntu/Kubuntu) does not render properly font weights

What version of Tailwind CSS are you using?

v3.0.24

What build tool (or framework if it abstracts the build tool) are you using?

svelte-kit@latest

What version of Node.js are you using?

v16

What browser are you using?

Chrome

What operating system are you using?

linux@ubuntu/kubuntu

Describe your issue

I’ve always used Windows and Mac. Lately I’ve been forced to use linux (both Ubuntu and Kubuntu 22.04).

To my surprise the fonts on the site do not match those on Windows and Mac and a lot of the graphics work is spoiled by this “idiosyncrasy”.

In the following screenshots you can see the tailwind website on Chrome v100 before and after changing the font-family (manually in the dev-tools panel).

As you can see, when the “Inter” font is removed (ie when we developers decide NOT to use custom fonts) the browser chooses to display everything with the “Noto Sans” font which does not distinguish between font-light, font-normal and font-medium and then between font-semibold and font-bold.

Expected

Can we change the default font-family in a smarter way that takes into account the default fonts on all the most used operating systems?

Screens

• with Inter font:

  

• without Inter font:

  

[adamwathan]

We spent some more time looking into this just to be sure we understood exactly what was going on and the answer here is really just that on those OSes, system-ui maps to Cantarell and the version of Cantarell that ships with those OSes only supports a limited number of weights.

You can see on the Wikipedia page that the non-variable version of the font only includes four weights:

https://en.wikipedia.org/wiki/Cantarell_(typeface)

This means that of course certain Tailwind font-weight utilities will look the same, since there’s no dedicated weight to actually render.

This is true of other system fonts as well, for example Segoe UI on Windows only includes 6 weights, when Tailwind includes 9 font-weight utilities.

Going to close this as just something we don’t intend to take any action on — our default font stack intentionally uses the system font and like you’ve discovered that means there will be inconsistencies between different operating systems. We are comfortable with that trade-off because it means that at least out of the box Tailwind matches the look of the OS that user is on, and that there is no performance penalty for loading a custom font, but if it’s important for your project that things look exactly the same in every browser then we recommend using a custom font. This is what we do for our own sites for example 👍

[frederikhors]

@thecrypticace I tried with Kubuntu too (that was the screen). Thank you.