Skip to content

Font too bold in Firefox

Featured Replies

I am trying to use Montserrat web font (thanks Kathrinvdm!) on my blog. I noticed that the headlines look very different when I open the blog in different browsers. I tried Safari, Chrome and Firefox on my iMac. The font appears much bolder in Firefox. What am I doing wrong?

Yes, a link or screenshot would help. 

If it’s what Riccardo said and you just call one webfont without a properly linked family, try setting the font-weight this way:

h1, h2, h3, h4, h5, h6 {
    font-weight:normal;
    }

Otherwise, if the fonts just appear slightly different, you probably see the different render engines at play. 

For OS X you can influence this a little bit through:

-webkit-font-smoothing
-moz-osx-font-smoothing

Here is a demo with the possible values for Safari/Chrome: http://files.christophzillgens.com/webkit-font-smoothing.html
For Firefox you can switch to greyscale for lighter text. http://ss64.com/css/font-smoothing.html

  • 2 weeks later...
  • Author

 

For OS X you can influence this a little bit through:

-webkit-font-smoothing
-moz-osx-font-smoothing

​Thank you. That helped!

Create an account or sign in to comment

Important Information

We are placing functional cookies on your device to help make this website better.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.