Bad Montserrat font version (firefox bug if using font from google fonts)

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time

https://quasar.dev

MIT License

25.89k stars 3.51k forks source link

Bad Montserrat font version (firefox bug if using font from google fonts) #15639

Closed FragsterAt closed 1 year ago

FragsterAt commented 1 year ago

Description

Montserrat font has very bad readability in firefox, when using it version from google fonts package or cdn. There is updated version without this bug on https://fontsource.org/ , that also have good packages with very simple including:

@import "@fontsource/montserrat/200.css"
@import "@fontsource/montserrat/400.css"
@import "@fontsource/montserrat/500.css"
@import "@fontsource/montserrat/600.css"
@import "@fontsource/montserrat/700.css"

Documentation Section URL

No response

Flavour

None

Areas

Style & Identity (quasar)

rstoenescu commented 1 year ago

Thank you for this ticket. We haven't bumped into this issue, but this is a good opportunity to understand why some of the devs were reporting "bad typography".

Next docs deployment will have the fixed montserrat version.

FragsterAt commented 1 year ago

@rstoenescu

fonts, attached from google fonts:

fonts, attached from fontsource:

rstoenescu commented 1 year ago

Docs have been updated. Can you confirm that it now works as expected? Just to be sure that you're looking at latest and greatest, please remove the PWA and clear the browser cache.

FragsterAt commented 1 year ago

Docs have been updated. Can you confirm that it now works as expected? Just to be sure that you're looking at latest and greatest, please remove the PWA and clear the browser cache.

The problem seems to be more complex. Firefox has turned off support of variable fonts in OS < win 10 (win server < 2019), so if you user of this OSes (like me with win server 2016), you see thin montserrat, if site use variable version of this font. Fontsource use fixed-weight version, so it forks fine on this OSes. This is also actual for macOS < 10.13 see notes at https://caniuse.com/variable-fonts

rstoenescu commented 1 year ago

Try number 2. Docs deploying.

rstoenescu commented 1 year ago

It's been deployed with fallback. Can you check again, pls? Thanks for all your help!

FragsterAt commented 1 year ago

Now it is fine! Thanks a lot!

rstoenescu commented 1 year ago

Thank YOU for the detailed report here. There were many devs that complained about "bad typography" and we couldn't understand what they meant because for all of us it looked fine. Since no screenshots were attached we just thought that they didn't like the font itself in the first place. But due to your ticket, we could finally nail the problem and fix it.