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 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.


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 SEO.

20 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
                    -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 the 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,

    1. Hello Miodrag:

      In order for myself and other to understand the specific bug you are experiencing, can you provide some additional information?

      • The font you are having issues with.
      • Which OS (and version if possible) where you are seeing the bug.
      • How are you loading the font? (Typekit, Google Fonts, font-face CSS, etc.)


  3. When I type an email message on my Chromebook using Firefox and Google mail I see a very bold type. Is there no way to get back to normal non-bold ? I’m no geek so I hope it is simple.

  4. I’m having the same issue in Firefox 73.0.1 and Firefox 48.0.2 (two Mac OS systems). Font affected is Helvetica / Arial (of all bloody things). Used for text but I can’t get rid of bloody bolding! Unfortunately these hacks aren’t working for me — anybody else struck this?

  5. This was a life saver. I’m using Poppins font at font weight 400 on Firefox which looked good, but then terrible on Safari/Chrome (Webkit). So I increased to 500 on Safari/Chrome and then added your “hack” making Firefox right. Thanks so much!

Leave a Reply to David James Cancel reply

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