This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

FF keeps rendering text in BOLD instead of the font-weight set in CSS. Anyone else having this issue?

more options

I'm having this issue in Firefox where it's rendering all of the Google fonts on two websites I've created as BOLD instead of THIN or REGULAR or whatever else they're set to in the CSS. I've found many instances online of users reporting this and similar issues over the past few years and have tried a number of solutions. Adding the following code as "extra CSS" to the Wordpress theme is the only thing that fixes it:

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

Yet adding this code has caused other rendering issues on the site. Both sites I'm having this issue on look fine in Chrome and Safari btw. I've troubleshooted by clearing my caches, disabling the few plugins I have installed and switched to different WP themes by different developers but the problem persists. I tried changing FF settings too... disabling plugins and add-ons, switched themes and turned off hardware acceleration to no avail. It should be noted I don't notice this on random sites I visit, just these that I've created using Wordpress. Checking another site I created by hand coding the Google fonts render fine.

Attached are two examples of the issue. First is the correct rendering, second is the incorrect BOLD rendering of the same text. Any thoughts anyone?

I'm having this issue in Firefox where it's rendering all of the Google fonts on two websites I've created as BOLD instead of THIN or REGULAR or whatever else they're set to in the CSS. I've found many instances online of users reporting this and similar issues over the past few years and have tried a number of solutions. Adding the following code as "extra CSS" to the Wordpress theme is the only thing that fixes it: html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } Yet adding this code has caused other rendering issues on the site. Both sites I'm having this issue on look fine in Chrome and Safari btw. I've troubleshooted by clearing my caches, disabling the few plugins I have installed and switched to different WP themes by different developers but the problem persists. I tried changing FF settings too... disabling plugins and add-ons, switched themes and turned off hardware acceleration to no avail. It should be noted I don't notice this on random sites I visit, just these that I've created using Wordpress. Checking another site I created by hand coding the Google fonts render fine. Attached are two examples of the issue. First is the correct rendering, second is the incorrect BOLD rendering of the same text. Any thoughts anyone?
Attached screenshots

Modified by o-o--LOKI--o-o

All Replies (11)

more options

Can you provide a link to the website?

more options

o-o--LOKI--o-o said

It should be noted I don't notice this on random sites I visit, just these that I've created using Wordpress. Checking another site I created by hand coding the Google fonts render fine.

Can you give a link to a page demonstrating the problem? It would be interesting to see whether there is any unusual CSS that isn't used on, say, the Google Fonts example page for the same font (where presumably it looks normal to you).

more options

You can use the Inspector to check what CSS rules are applied and what font is used in case a bold(er) font is being used. The Computed tab shows what rule(s) are present and active.

You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected.

You can check the font used for selected text in the Font tab in the right pane of the Inspector.

more options

Thanks for the replies guys. Here's a link to my own website where I've disabled the extra CSS-fix so that the entire site renders bold.

http://neptunemedia.net/

I'm going to dive into the Inspector this morning and spend some time trying to figure out what CSS rules are being applied and why my font-weight specifications are being overwritten.

I'm very familiar with the Inspector and use it frequently. Feel free to check it out yourselves if you have time... perhaps one of you can see something I'm not seeing.

Thanks!

more options

[WORKING NOW, NEVER MIND THIS POST]

Modified by jscher2000 - Support Volunteer

more options

FYI, if anyone checks out my website and it looks completely messed up, I'm deactivating almost all plugins to see if any of them are the cause of the problem.

more options

jscher2000.... LOL... figures someone would be on this immediately, right when I'm messing around with plugins. As soon as I determine none are the problem, I'll post another message saying the site is fully back up and running.

more options

I've determined it's not a plugin issue. The site is back up and fully running.

more options

The Lato (or Lato Light) font used on your site looks different from the example you posted originally.

Anyway, considering that the rules at issue are for MacOS only, I might not be able to help (as a Windows user).

more options

Yeah I posted sample text from another site of mine. Thanks anyway.

more options

Can you do a comparison between how Lato or Lato Light looks for you on your site vs. how it looks on Google's page?

https://fonts.google.com/specimen/Lato