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.
Table of Contents
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
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.
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.
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
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.
^^ Did you try other solutions given above?
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.
Thanks, #1 solution was simple, and worked like a charm!
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.
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.
Thank you so much for providing a solution. Larger fonts and icons were really a difficulty with my 13 in screen.
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.
Thank you!!!
I just updated FF and wondered what the hell just happened. Solution 1 was an instant fix.
Works great, Thanks a lot
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.
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.
Thank you sir!! Solution #1 was fast and easy. Greatly appreciated! Now I can sleep tonight.
THANK YOU! This was driving me crazy! Solution 1 did it. Thank you!!
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.
^^ Check following:
https://www.askvg.com/tip-enable-colorized-titlebar-again-in-firefox-103-and-later-versions/
PS: Same discussion is going on in following article’s comment section:
https://www.askvg.com/tip-new-working-method-to-restore-classic-theme-and-ui-in-firefox-91-and-later-versions/
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
I can’t thank you enough for this clear and concise solution to a very annoying issue.
You are the best! 🙂
Thank you so much for this! I was about to uninstall Firefox forever. What were the devs at Mozilla thinking??
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!
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.
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 ?
Excellent Knowledge VG ! Thanks, it solved the issue.
Finally someone with a real solution that at last fixed my problem.
Thanks a lot