Fix UI Scaling and Large Fonts Issues in Firefox 103 and Later Versions

If you installed or upgraded to Mozilla Firefox 103 or later version and you noticed that the fonts, menus and webpage contents are displaying too large on your computer screen, this article will help you in fixing the scaling issue and making the UI and fonts back to normal in Firefox.

PROBLEM SYMPTOM

As soon as you install or upgrade to newer version of Firefox, everything in Firefox becomes too large and bigger which makes the browsing experience very difficult and annoying.

Following screenshot shows large UI elements and bigger fonts displaying in Firefox browser:

Advertisement

Larger_UI_Bigger_Fonts_Problem_Mozilla_Firefox.png

PROBLEM REASON

It happens because Mozilla team has added a new feature to Firefox 103 and later versions which forces Firefox to respect the system DPI scaling and font size settings applied in Windows operating system. If a user has applied custom font size in Windows 10 or Windows 11 using Settings -> Accessibility -> Text Size -> Make text bigger option, Firefox will now use that setting to draw its UI elements and text in all places.

In previous versions, Firefox used to partially follow the scaling settings in Windows for system fonts only and that’s why users didn’t notice any UI issues. But starting from Firefox 103 version, the browser now fully respects Windows DPI scaling and font size settings and modifies the UI elements and all menu items, fonts, etc to match with Windows.

Related: [Tip] How to Change Text Font Size in Windows 10

That’s why users may notice large UI elements and bigger fonts in Firefox as most of the computer systems use 125% DPI scaling by default in Windows 10 and Windows 11 operating systems.

Other browsers such as Google Chrome and Microsoft Edge already do this since long time and now Firefox has also joined them.

PROBLEM SOLUTION

To fix the scaling issue, you can modify a hidden secret preference/flag in Firefox to force the browser to use old classic UI and normal fonts again like previous versions.

Advertisement

Following steps will help you in fixing large UI and bigger fonts issue in Firefox:

SOLUTION 1:

1. Open Firefox and type about:config in the addressbar and press Enter. It’ll show you a warning message, click on “Accept the Risk and Continue” button. It’ll open Firefox’s hidden secret advanced configuration page i.e. about:config page.

2. Now create a new preference ui.textScaleFactor as NUMBER and set its value to 100 to fix the scaling and fonts issue.

PS: If value of 100 doesn’t work for you, try to set the value to 90 or 80. Different screen resolutions and DPI scaling will require different values of the above mentioned preference.

How to Create: Open about:config page, paste ui.textScaleFactor in search preference name box, select Number radio button, click on + (Add) button, enter 100 in value field and press Enter key to save the value.

Disable_Windows_Make_Text_Bigger_Setting_Mozilla_Firefox_Scaling.png

SOLUTION 2:

1. On about:config page, type os-zoom in Search filter box and look for following preference in the window:

browser.display.os-zoom-behavior

The preference value is set to 1 by default, which means Firefox is set to respect Windows scaling and font size settings.

2. To disable the new larger UI and bigger fonts and restore normal fonts in Firefox, double-click on browser.display.os-zoom-behavior preference and set it to 0. Alternatively, you can click on the Edit (Pencil) icon given next to the preference name and change the value to 0.

Fix_Larger_UI_Bigger_Fonts_DPI_Scaling_Issue_Mozilla_Firefox.png

That’s it. Firefox will immediately decrease UI elements size and start showing normal fonts again like previous versions.

NOTE: You can also try to change the preference value to 2.

PS: In future, if you decide to restore default new UI and fonts in Firefox, set the above mentioned preference to 1 again.

SOLUTION 3:

You can also try to modify following preference/flag on about:config page to change UI elements and fonts size:

layout.css.devPixelsPerPx

The preference is set to -1.0 by default. Change its value to 1.0 or 0.9 and it’ll also fix the scaling and large fonts issue.

BONUS TIP 1:

You can also try to activate and enable secret Compact Mode to decrease the size of toolbars, bookmarks bar, tabs, menus, etc using following article:

[Tip] Restore “Compact Mode” Density Option in Firefox Customize Window

BONUS TIP 2:

If you find the text on webpages too large, you can zoom out by pressing Ctrl and – (minus) keys together to decrease webpage font size. You can also set a universal zoom setting for all websites using Firefox Options window.

Also Check:

[Tip] Restore Classic Keyboard Behavior for Firefox Toolbar Navigation

[Tip] Force Firefox to Start Downloads in Temp Folder Again

New Method to Enable Classic Print Preview Dialog in Firefox 101 and Later

[Firefox Tip] Restore Classic Dotted Outline Focus Indicator for Links

Published in: Mozilla Firefox, Troubleshooting Guides

About the author: Vishal Gupta (also known as VG) has been awarded with Microsoft MVP (Most Valuable Professional) award. He holds Masters degree in Computer Applications (MCA). He has written several tech articles for popular newspapers and magazines and has also appeared in tech shows on various TV channels.

Comments

NOTE: Older comments have been removed to reduce database overhead.

  1. Due to the update I’ve rediscovered “make text bigger” and “make everything bigger” which I had set so long ago that I forgot they were in Windows settings. I had set to make reading easier (eye issues); it worked and I forgot about until this update scrambled up webpages.

    I’ve been trying to get back to “normal” w/o success.

    I’ve done Solution: Tabs, toolbar menu etc are tiny & difficult to read. I need these larger w/o making webpages a mess. The FF update appears to have affected Excel and possibly other things I use.

    If FF103 is now using Windows settings to alter (mess up) websites, what settings should we have in Windows?

    OR: Is there a way to disconnect FF & Windows so that I can make text/everything larger w/o making websites close to useless (everything huge & too much scrolling).

    I’m NOT a tech person & not sure I understand all the issues. thanks for your help.

  2. Thank you for this. I moved over to Waterfox when this “update” happened as the sizing drove me crazy using a 150% increase on a large screen monitor. Now I’m back to normal after following your excellent instructions and can once again enjoy Firefox proper and all timely security updates.

  3. YES Ty you’re my savior
    This was always a pain after every update, each time you got to find a different solution. I mean why don’t put a tickbox follow windows scaling. Thats a basement instead of forcing it.

  4. Solution 1 worked. Thank you so much! I thought I was going to have to go back to Chrome. I appreciate you creating this blog post.

  5. Thank you so much for providing a solution. Larger fonts and icons were really a difficulty with my 13 in screen.

  6. Personellement, j’ai trouvé une autre solution : j’ai modifié la taille des polices de base dans Firefox en 16 – 14 – 12.
    Et là, Je suis revenu à des pages avec des tailles à peu près normales.

    Translation:

    Personally, I found another solution: I changed the base font size in Firefox to 16 – 14 – 12. And there, I returned to pages with roughly normal sizes.

  7. Thank you!!!

    I just updated FF and wondered what the hell just happened. Solution 1 was an instant fix.

  8. Adding the ui.textScaleFactor setting and using a value of 100 worked for me; however, I’ve noticed that I still need to readjust the zoom on some web pages and a few pages still don’t look exactly the way they did previously. But it’s ok. Firefox needs to reverse the zoom changes they made with this update!

    For those who find the tab and menu bar too small after adding ui.textScaleFactor set at 100, I suggest you try changing the number to a smaller number. A user on the forum mentioned he was using a different value, so I experimented with other values and found that larger numbers made the menu smaller and lower numbers made the menu larger. The value of 100 still works best for me, but if your menu, tabs, etc., is too small, perhaps try a value of 90 and if that’s not exactly what you want you can experiment with other values.

  9. Thank so much for sharing your expertise, and for figuring out alternative solutions so quickly after FF103 release. I tried options 2 and 3, and settled on the last with setting 0.8.

  10. Thank you sir!! Solution #1 was fast and easy. Greatly appreciated! Now I can sleep tonight.

  11. Hello,

    is there a problem to fix the Windows accent color in the title bar of FF 103?

    In FF 102 I was successfully using

    .titlebar-color{
    color: -moz-accent-color-foreground;
    background-color: -moz-accent-color;
    }

    in my userChrome.css, but this does not work anymore.

  12. When I changed the number in os-zoom:
    0 was minisucle
    1 is what its set to
    as suggested I tried 2 and bingo! it worked. Thank you

  13. I can’t thank you enough for this clear and concise solution to a very annoying issue.

    You are the best! 🙂

  14. Thank you so much for this! I was about to uninstall Firefox forever. What were the devs at Mozilla thinking??

  15. Thank you. Thank you. Bless you! Been happily using FF for years but this latest Mozilla change was just too much to bear, until a friend led me to your site!

  16. Thank you for not only providing the solution, but also describing the cause of the problem. Extremely well-written, thoughtful, and the instructions were easy to follow. Best of all, Solution Number 1 worked perfectly. Again, thank you for your efforts.

  17. why didn’t Firefox fix the problem them selves as soon as they were made aware of it ?

    and what problem is going to be next ?

Leave a Comment

Your email address will not be published. Required fields are marked *

NOTE: Your comment may not appear immediately. It'll become visible once we approve it.