FF keeps rendering text in BOLD instead of the font-weight set in CSS. Anyone else having this issue?
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?
Modified by o-o--LOKI--o-o
All Replies (11)
Can you provide a link to the website?
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).
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.
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.
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!
[WORKING NOW, NEVER MIND THIS POST]
Modified by jscher2000 - Support Volunteer
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.
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.
I've determined it's not a plugin issue. The site is back up and fully running.
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).
Yeah I posted sample text from another site of mine. Thanks anyway.
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?