I'm using Google Fonts and CSS's @import
method to include fonts onto my website.
Chrome displays the fonts beautifully; they have even weights and are crisp to view. Firefox does not replicate this rendering. See below:
On the left you can see Firefox. The font weight of the title is not consistent. You can see that the smaller descriptive text has some additional weight than the Chrome counterpart.
Chrome is on the right, and as you can see, the fonts are respectfully weighted.
I am using the following CSS in an attempt to fix this issue:
@import url('https://fonts.googleapis.com/css?family=Muli|Source+Code+Pro');
* {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
How can I resolve this issue and have Firefox displaying my fonts with proper weights?
Firefox Version: 57.0.1 (64 bit) [Most recent]
Chrome Version: 62.0.3202.94 (64 bit) [Most recent]
Many thanks.
geometricPrecision
overoptimizeLegibility
, see if that helps? Other than that, as abney317 said, it's hard to offer much advice without being able to replicate the issue.@import
-@import url('https://fonts.googleapis.com/css?family=Muli|Source+Code+Pro');
. I've also changed my question to include this.geometricPrecision
overoptimizeLegibility
, and that hasn't worked. Thanks for the suggestion.