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

Font rendering problem in Firefox 45.*

  • 11 replies
  • 16 have this problem
  • 4 views
  • Last reply by pbr1001

more options

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.

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 by cor-el

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 👍 1

All Replies (11)

more options

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.

more options

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.

more options

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.

more options

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.

more options

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;

more options

Screenshot comparing the Adobe forum with default settings (hardware acceleration enabled) and in Firefox's Safe Mode, which disables hardware acceleration.

more options

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

more options

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 by pbr1001

more options

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

more options

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.

more options

Actually, I am interested. Again, thank you so much for the effort you put into this!