5

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:

Firefox vs Chrome

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.

4
  • Can you include the @import CSS and relevant HTML as well so we can see a more specific example to test with?
    – abney317
    Dec 7, 2017 at 17:34
  • Maybe try geometricPrecision over optimizeLegibility, see if that helps? Other than that, as abney317 said, it's hard to offer much advice without being able to replicate the issue.
    – delinear
    Dec 7, 2017 at 17:40
  • @abney317 - Hi, here's the @import - @import url('https://fonts.googleapis.com/css?family=Muli|Source+Code+Pro'); . I've also changed my question to include this.
    – Ryan
    Dec 7, 2017 at 17:52
  • @delinear - I have tried geometricPrecision over optimizeLegibility, and that hasn't worked. Thanks for the suggestion.
    – Ryan
    Dec 7, 2017 at 17:55

4 Answers 4

2

You're walking a bleak path. Right now, your best bet is to keep things as is and let the browser and OS makers fix their text rendering implementations.

Trust me, I've played with all these settings and none will produce a decent/consistent render, especially when you start testing across Windows, OS X, and Linux.

Overriding text-rendering and font-smoothing will eventually slow down your entire app (especially on instances where the DOM tree is large).

It will look bad no matter what if the end-user doesn't care about text rendering (perhaps he didn't set up ClearType on a Windows XP?).


Point being: do not try to force the text-rendering on all your elements. On headings where the font-rendering looks really off, try using geometricPrecision as that will try to keep the original shape precision of the font glyphs upon rendering.

3
  • Hi Jerome. Thanks for this answer. You'd think by now that a browser as grown-up as Firefox could render fonts properly? Would it be worth looking at specific font types (WOFF, TTF, etc)?
    – Ryan
    Dec 7, 2017 at 18:07
  • 1
    That wouldn't change anything. The issue lies with how the OSes handle subpixel rendering of the fonts. Dec 7, 2017 at 18:14
  • Ah, that makes sense. Thanks
    – Ryan
    Dec 7, 2017 at 18:19
2

As others wrote, don't bother trying to "fixing" text rendering in browsers (or operating systems)

Text rendering is an awfully complex process with lots of heuristics and special cases, browsers and operating systems are always tweaking their rendering to try to achieve better compromises, they are not nor ever will be consistent with one another or from version to version, and depending on the font (and font version) you use you may hit a rendering sweet spot or horror case.

Plus your evaluation of the result will always be heavily biased by the rendering you're used to, and your users will often have different habits and preferences.

The only rendering you may fix is the one on your system for your tastes, and the best way to do that is just to buy a HiDPI screen, as most of the text rendering approximations, bad rounding and heuristic black magic is due to trying to fit complex and small glyph shapes in not enough pixels.

3
  • 2
    Makes you wonder why nobody has made a standard for this yet, don't you think? Feb 10, 2018 at 23:15
  • 1
    Nobody has made a standard of this because it's all a pile of heuristics and the heuristics have seen continuous tuning and rewriting pretty much since WYSIWYG was invented. So, there's nothing to standardize short of mandating HiDPI and forgetting about trying to shoehorn complex small shapes on screens with not enough pixel density
    – nim
    Feb 16, 2018 at 10:30
  • Hah, sadly enough that makes perfect sense. Thanks for the insights. Feb 19, 2018 at 21:56
1

For this specific font (Source Code Pro), I had the same problem - the rendering was very different across Chrome/Firefox. It turned out that we had only imported the 400 weight version of the font, but we were setting it to font-weight: bold in the css.

Our old font def:

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(<FONT URL>) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Chrome tried to render the font bold even though a bold version didn't exist (and did a pretty good job of that), while Firefox simply didn't even try to render it bold. So that's why they looked so different.

We resolved the issue by importing the bold variation of the font as well and now Firefox renders it very similar to Chrome.

Our new font def:

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(<FONT URL>) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), url(<FONT URL>) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
0

I have been testing a few things out, and I've found some way to make sure that Firefox doesn't show an inconsistent font weight.

I can use some jQuery to detect the browser, and from there I can add browser-specific styles. In this case, I've added a font-weight to the title block so that it has a lighter font-weight, which creates a cleaner look:

Firefox (Light Font) vs Chrome (Regular font)

On the left is Firefox with font-weight: 400, and on the right, Chrome with font-weight: 600. See below for my browser-detecting jQuery.

if (navigator.userAgent.search("Firefox") >= 0) {
    $('body').addClass('firefox');
}

My CSS is as follows:

body.firefox h1 {
     font-weight: 400;
}

It's not necessarily a fix, however it removes the choppy-ness of the font weighting.

Please feel free to comment about any better ways of doing this, or with a more practical solution to the question.

Many thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.