Font rendering problem in Firefox 45.*
After upgrading to FF 45.0 fonts on some web pages (notably the Adobe forums) look thin and scraggly and kerning seems to be messed up when I have "Allow pages to choose their own fonts instead of my selections above" checked. The problem also exists in FF 45.1. This has, in fact, become a topic on the Adobe Forum Comments forum ( https://forums.adobe.com/thread/2112505 ). I looked at this question ( https://support.mozilla.org/en-US/questions/1111253#answer-847637 ) but the solution offered there doesn't apply since I already have the platform upgrade installed. Windows 7 Pro SP1.
Modified
Chosen solution
If necessary, you can use custom style rules to substitute particularly poor-rendering webfonts for a local one. The technique is described in this thread: Updating to version41.0.2, Firefox now outlines text on some websites. How do I correct this?
To replace the five definitions of different weights and styles of Adobe Clean with Arial, the style rules would be as follows:
@font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:normal;font-weight:300; } @font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:normal;font-weight:400; } @font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:normal;font-weight:700; } @font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:italic;font-weight:400; } @font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:italic;font-weight:700; }
I posted it here if you plan to use Stylish to test it out: https://userstyles.org/styles/126055/adobe-forums-substitute-arial-for-adobe-clean
Read this answer in context 👍 1All Replies (11)
Anticipating a couple possible suggestions — hardware acceleration is not enabled nor has it ever been, and my graphics driver updated maybe three days ago, so it's as current as it's going to get. The problem existed both before and after the update.
You may have accidentally zoomed web page(s). Reset the page zoom on pages that cause problems.
- View > Zoom > Reset (Ctrl+0/Command+0 (zero))
You can right-click and select "Inspect Element" to open the Inspector ("3-bar" menu button or Tools > Web Developer) with this element selected. You can check the font used for selected text in the Font tab in the right pane of the Inspector.
Thank you for responding, but no, it's not zoomed. In fact, it clarifies somewhat if you zoom in three clicks. Then again, how not?
I right-clicked on a patch of type and opened up the inspector. The font is "Adobe Clean remote". The site utilizes Adobe Typekit for its fonts.
Be it noted that other browsers display these fonts properly. This is strictly a Firefox thing that started with 45.0.
Did you check out the Adobe forum I cited above? I'm not alone.
Let me add two things.
I've noted this behavior: when the page first opens, the type renders properly for about one second, then blinks and goes skanky.
As an experiment, I opened Firefox in safe mode. It made no difference.
pbr1001 said
...hardware acceleration is not enabled nor has it ever been...
Is that because it doesn't work??
I think Firefox needs to use DirectWrite/Direct2D for sub-pixel aliasing of downloadable fonts, which is how ClearType smooths them best. Otherwise, fonts are likely rendered only with whole pixels which looks like the 90s.
I've noted this behavior: when the page first opens, the type renders properly for about one second, then blinks and goes skanky.
Could be that Firefox is initially using Arial, then switching to Adobe Clean after it is loaded -- most Windows systems don't have Helvetical Neue (which is good, because it looks awful in Firefox):
font-family: "adobe-clean", "Helvetica Neue", Arial, sans-serif;
Screenshot comparing the Adobe forum with default settings (hardware acceleration enabled) and in Firefox's Safe Mode, which disables hardware acceleration.
Chosen Solution
If necessary, you can use custom style rules to substitute particularly poor-rendering webfonts for a local one. The technique is described in this thread: Updating to version41.0.2, Firefox now outlines text on some websites. How do I correct this?
To replace the five definitions of different weights and styles of Adobe Clean with Arial, the style rules would be as follows:
@font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:normal;font-weight:300; } @font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:normal;font-weight:400; } @font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:normal;font-weight:700; } @font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:italic;font-weight:400; } @font-face { font-family:"adobe-clean"; src:local('Arial'); font-style:italic;font-weight:700; }
I posted it here if you plan to use Stylish to test it out: https://userstyles.org/styles/126055/adobe-forums-substitute-arial-for-adobe-clean
Going down the line (and by the way, thank you for taking the time) —
"Is that because it doesn't work??"
No, that's been my default setting since...forever. I never set it that way, it's just how it's always been. In any event, hardware acceleration enabled or disabled, the fonts render the same.
"I think Firefox needs to use DirectWrite/Direct2D for sub-pixel aliasing of downloadable fonts"
That's the platform upgrade I referred to way back at the beginning, correct? It's already installed. (I know, because I downloaded it and got a message saying it's already on my machine.)
"Could be that Firefox is initially using Arial, then switching to Adobe Clean after it is loaded"
I suspect you're right. It goes by too quickly to be sure, but I unchecked "Allow pages to choose their own fonts..." and it seems to look more like what I get when I do that than it does the fonts displayed in some old screenshots I took of various Forum pages in the past. If you can follow that sentence.
Re: your screenshot comparison — as I said, I tried FF in safe mode and it made no difference.
Re: Stylish. I shouldn't have to install an extension to solve a problem that didn't exist until the latest version of Firefox came out. I have a sneaking suspicion that it probably would work, but really! Still, I'll give it a shot tomorrow.
[Edit] Okay, I had to know. I installed Stylish and then installed your script. Bingo! That cleans things up. Thank you very much!
Modified
If you decide you have too many extensions, custom style rules also can be applied to web pages by creating/editing a userContent.css file. The advantage of using Stylish is you can more easily preview and tweak your rules. Not always something users care about!
More reading if you're interested: http://kb.mozillazine.org/UserContent.css
Note that you can still save CSS rules to separate files if you use userContent.css and use @import url(); rules to import each of the CSS files.
Actually, I am interested. Again, thank you so much for the effort you put into this!