firefox font displayed poorly on some webpages that use Roboto font. I don't have that font installed.
Some websites display poorly on Firefox 119.0 on my Dell computer running Windows 11. Some of the letters of the fonts are too thin and hard to read. They display correctly in Edge.
I have used Inspect Element to see that the font is: font-family: Roboto, Helvetica, Arial, sans-serif;
The problem goes away if I change this to: font-family: Helvetica, Arial, sans-serif;
I do not have the Roboto or Helvetica fonts installed on my computer.
The problem fixes itself if I turn off the setting for "Allow pages to choose their own fonts, instead of your selection above." However, this is not a good solution, because it introduces other issues.
Any help or suggestions would be greatly appreciated.
I have researched this for several hours and tried many of the suggestions online.
1) I have disabled all extensions. 2) I don't have any Themes installed in Firefox. 3) I have tried "Smooth edges of images and text" turned on and off. 4) The problem still occurs when running Firefox in Safe Mode. 5) I don't have a "High Contrast theme" enabled in the OS settings. 6) I am not running uBlock Origin. 7) I have played with Clear Type but the problem was occurring before that. I have tried modifying Firefox's gfx.font_rendering.cleartype_params.gamma to the value of GammaLevel from Windows's registry Computer\HKEY_CURRENT_USER\Software\Microsoft\Avalon.Graphics\DISPLAY1. 8) I haven't installed any fonts on my computer. 9) I tried setting security.sandbox.content.level = 1.
All Replies (4)
The Roboto font is normally downloaded from internet via @font-face CSS rules (i.e. is a remote font). Do you have content blocking extensions installed and enabled ?
Did you check the Fonts tab in the right panel in the Inspector?
You can check in the Fonts tab in the right panel in the Inspector what font is actually used because Firefox might be using a different font than specified by the website. If the Fonts tab is hidden, click the down arrow at the right end.
You can check the Web Console (Tools -> Web Developer) for messages about blocked content and about the presence of mixed or unsafe content.
Does it still happen in a new profile? An easy way to test a new profile is to install Developer Edition and see if it happens there or refresh your existing profile.
Thanks for your assistance.
I have attached two images of how the same screen looks from Microsoft Edge and Firefox. You should be able to see that some characters are darker than others on Firefox. I apologize for the poor quality. I had to take the pictures using my cellphone.
I tested using the Developer Edition and had the same problem.
I also tested on another computer with the same account and didn't have this problem. I don't know if I have anything configured differently on the other computer.
Any tips on what else might be causing the problem would be appreciated.
Thanks for the tip about using the down arrow to get to the Fonts tab. The Fonts tab for one of the websites shows that the font is Roboto 14px. The Fonts tab for the other website shows that the font is OpenSans-Regular 13px. Changing the font sizes didn't solve the problem.
Web Console didn't show any messages about blocked content and about the presence of mixed or unsafe content on one of the websites. On the other website, it had the following errors. I don't know if they are significant.
ChunkLoadError: Loading chunk 5 failed. (missing: undefined) outer.js:1:4314 downloadable font: Glyph bbox was incorrect (glyph ids 33 55 62 81 82 83 84 87 88 89 90 112 119 120 123 139 159 162 164 166 178 184 185 217 218 272 273 274 275 279 281 284 290 291 292 309 310 319 321 323 326 329 330 331 332 333 334 339 341 347 349 351 352 353 354 357 358 361 366 367 370 371 414 431 436 444 445 458 460 464 465 483 505 508 511 514 516 517 518 520 521 538 539 546 568 574 579 580 585 586 594 596 599 602 603 616 618 622 627 629 630 633 634 638 643 645 651 654 665 675 685 686 688 691) (font-family: "FontAwesome" style:normal weight:400 stretch:100 src index:1) source: http://kb-kace/common/css/fonts/fontawesome-webfont.woff2?v=4.7.0
You can try to disable hardware acceleration in Firefox.
- Settings -> General -> Performance
remove checkmark: [ ] "Use recommended performance settings"
remove checkmark: [ ] "Use hardware acceleration when available" - https://support.mozilla.org/en-US/kb/performance-settings
Close and restart Firefox after modifying the setting to apply changes.
You can check if there is an update for your graphics display driver and check for hardware acceleration related issues.