How to fix incorrect font display in Firefox?

Question

css

There is text on the site in Rubik font. In the Chrome browser, it is displayed correctly, but in Mozilla, some lines seem to be thinner. The following stabilizing rules are currently applied:

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;

Unfortunately, they did not help, in the screenshots you can see the whole picture.
Chrome:

Firefox:

Example:
Link

Answer 1

The link you provided shows the cause of the problem and the direction to fix it.
The point is that Rubik is a variable font.
Your font connection looks like this:

https://fonts.googleapis.com/css2?family=Rubik&display=swap

and is used in styles font-weight: 600. If you look inside the CSS that's loaded to include the font, you'll (naturally) see that the font is loaded for font-weight: 400, because that's the value that corresponds to Regular and is used by default.
In this way, you unintentionally create a situation where you use a font weight that does not exist. Apparently somewhere in Firefox (clearly in the list of dependencies of this issue ) there is a problem with rendering variable fonts, moreover, it is specific to Windows. I checked (via BrowserStack) on MacOS and everything is fine there.
The fix is ​​also obvious - you need to connect fonts correctly, specifying the lists of styles you need. For your example it would be:

https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap

the result immediately becomes correct: