Blog: Web Design
Photo of a Firefox (Red Panda)

Solved: Firefox Font Weight Renders Too Bold

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Every web browser has it’s quirks. In Firefox, some fonts render as bold when they should render at a normal font weight.

How do you fix it when the Firefox font weight renders too bold?

There are some CSS rules you can add that will fix the problem.

When Does Firefox Incorrectly Render Fonts As Bold?

This browser quirk most happens most often with thicker fonts, with Firefox on Mac or OSX, although it can also occur on Windows.

If you use Typekit to serve webfonts to your site, this Firefox bug can also appear.

Some of the fonts that have been known to trigger the Firefox font weight quirk are:

  • Droid Sans
  • Gill Sans
  • Montserrat
  • Poppins
  • Proxima Nova

Add This Near the Top of Your Stylesheet



/**
 * Fix fonts that render as bold in Firefox
 *
 * Put this near the top of your style.css
 * Before any overriding styles
 */

html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-weight: 400;
}

/**
 * Firefox specific rule
 */

@-moz-document url-prefix() {
  body {
    font-weight: lighter !important;
  }
}


The -moz prefixed rules target only Firefox. The -webkit prefixed rules target Chrome and Safari, which use the Webkit rendering engine for their browser.

Note:

If you also use text-rendering: optimizeLegibility in your stylesheet, that can cause Internet Explorer to render some thicker fonts as bold when they should render as normal weight.

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

10 comments on “Solved: Firefox Font Weight Renders Too Bold

  1. I don’t know where I originally found it, but i have been using a similar mixin for my Sass to do the same thing:

    
    
    @mixin font-smoothing($value: antialiased)
            @if $value == antialiased
                -webkit-font-smoothing: antialiased
                -moz-osx-font-smoothing: grayscale
    
            @else
                    -webkit-font-smoothing: subpixel-antialiased
                    -moz-osx-font-smoothing: auto
    
    
  2. This is so helpful. I just built a large site using Montserrat and cringed when I saw how awful it looked on IE and Firefox. It looks fantastic in Chrome. Your fix made the Firefox version look just like the Chrome one, but it still looks terrible in IE and every fix I’ve tried has failed. Anyone have an idea of how to address that?

    1. Hi T Ross:

      It looks like there was a known bug for Montserrat on IE 10/11 a few years back. Some of the advice I saw on Stack Overflow included making sure there was a secondary font defined (font-family: Monserrat, sans-serif;), and using the Web Font Loader instead of th traditional stylesheet link. (We talked about that here in a previous post.)

      What you may want to check out is a Stack Overflow answer here where they used a IE vendor prefix to reset font-feature-settings:

      
      
      /* Fix for IE10 and IE11 Montserrat font display issues. */
      p {
          -ms-font-feature-settings: normal;
      }
      
      
      

      You may also want to test using IE conditional tags to set optimizeLegibility: initial for IE only, as that can make it render as bold on certain fonts.

      Writing Conditional Tags for IE 10/11
      IE CSS Hacks for all versions

      Let me know if any of these clear up the issue for you.

      Thanks for subscribing,
      John

Join the Conversation

Your email address will be kept private. Required fields marked *.