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

How to increase menu text size and bookmark text size in FF 61

  • 12 replies
  • 1 has this problem
  • 6606 views
  • Last reply by Darrtz

more options

I have tried the suggestion and none work... https://support.mozilla.org/en-US/questions/1198817

I used to use an app for this and it no longer works either.

The font size for websites I was able to set @ 1.25 in about:config and are perfect size for me

But still the text size in the Firefox program is showing very small and hard to read.

Seems that every cosequent update strips away a needed feature. When searching for addons, the majority I select are no longer functioning.

Chosen solution

Here's an example using a userChrome.css file:

(A) Select and copy all of the following code

/* Classic Menu Bar (windows only?) */
#toolbar-menubar .menubar-text,
#toolbar-menubar menuitem, 
#toolbar-menubar menu {
  font-size: 14px !important;
}

/* Tab bar */
#TabsToolbar {
  font-size: 14px !important;
}

/* Main Toolbar */
#nav-bar {
  font-size: 14px !important;
}

/* Bookmarks Toolbar */
#PersonalToolbar, 
#PersonalToolbar menuitem,
#PersonalToolbar menu {
  font-size: 16px !important;
}

/* Context menus (this is not all of them) */
menupopup[id*="ContextMenu"] menuitem,
menupopup[id*="ContextMenu"] menu, 
#placesContext menuitem, 
#placesContext menu, 
#backForwardMenu menuitem {
  font-size: 14px !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the rules into the editor:

https://www.userchrome.org/download-userchrome-css.html

(See first attached screenshot)

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See second attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See third attached screenshot)

Minimize this window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Mac and Windows; hopefully Linux is similar.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you quit Firefox and start it up again, it should discover that file and apply the rules.

Success?

Read this answer in context 👍 1

All Replies (12)

more options

Did you try the keyboard function. Cntrl +/- to zoom in and out? And unless FF has a setting to change font size defaults you will be stuck with the default font size.

more options

The "Cntrl +/- to zoom in and out" only addresses the webpages. It does not affect the FF application ie. menus, bookmark text, toolbar, etc.

The "default font size" in options menu also affects the webpages, not the FF GUI.

yikes - another update a few minutes ago... now 'layout.css.devPixelsPerPx' has been removed :/

Modified by Darrtz

more options

Hi Darrtz, one method is this two-part approach:

(1) Set layout.css.devPixelsPerPx to a size that works well for the UI

(2) Use an extension to reduce the default level on web pages if that is too large

For example, if you have the following extension, you could try 80%:

https://addons.mozilla.org/firefox/addon/zoom-page-we/

The global zoom setting is a little hard to spot on its Options page. It's about half-way down:

Note: that screen shot is from several months ago; I haven't checked it lately.

more options

Hi jscher2000,

For some reason, the setting with 'layout.css.devPixelsPerPx' seems to affect the spacing in some undesireable way. By the time you get the font the size you want, the spacing looks terrible. You end up with a browser that looks like 'made for a commodore computer' :/

The issue with that app is that any enlargement affects the website layout... ie. If something is center placed, the app will render it of to one side - the more you enlarge, the more out of position the web design become.

I forgot to mention - I am using FF linux. The FF in windows is a bit more forgiving with how it looks...even tho I sure do miss that old app to set text and UI on the older versions of FF. The developer of the app says that unfortunately due to changes in FF, the only thing their app can do is change colors.

But thanks for the suggest tho - If this is the only solution, I suppose that there's not much I would be able to do to get it to look to the old comfortable feel.

Modified by Darrtz

more options

Darrtz said

I forgot to mention - I am using FF linux. The FF in windows is a bit more forgiving with how it looks...even tho I sure do miss that old app to set text and UI on the older versions of FF. The developer of the app says that unfortunately due to changes in FF, the only thing their app can do is change colors.

have you looked at any userChrome.css mods to see if they something that does what you're looking for then?

Modified by WestEnd

more options

Darrtz said

For some reason, the setting with 'layout.css.devPixelsPerPx' seems to affect the spacing in some undesireable way. You end up with a browser that looks like 'made for a commodore computer' :/

Does Linux not allow small adjustments? For example: 1.33 for 133%, 1.5 for 150%, etc.? Are you forced to scale up much more than you need?

The issue with that app is that any enlargement affects the website layout... ie. If something is center placed, the app will render it of to one side - the more you enlarge, the more out of position the web design become.

This is a problem with the Zoom Page WE extension? I was not aware of that.

If this is the only solution, I suppose that there's not much I would be able to do to get it to look to the old comfortable feel.

This isn't the only approach, but believe it or not, it's the easiest. You boost the overall scaling first, then use an extension to reduce zoom on documents.

If that doesn't work, you can apply custom style rules to the toolbar area using a userChrome.css file. I suggest asking for some rules on this forum:

https://www.reddit.com/r/FirefoxCSS/

For more information on how to set up the userChrome.css file, see my page here: https://www.userchrome.org/how-create-userchrome-css.html -- you'll notice I don't have specific steps for Linux because I don't use it. Maybe someday!

more options

I set the 'layout.css.devPixelsPerPx' scaling to 1.25 and is satisfactory for the webpages.

However the FF UI text is still very tiny... like a legal contract on this 22" monitor.

I did try wkipedia's css workaround by adding CSS to the profile, but could not get it to show nor work.

Modified by Darrtz

more options

Darrtz said

I set the 'layout.css.devPixelsPerPx' scaling to 1.25 and is satisfactory for the webpages. However the FF UI text is still very tiny... like a legal contract on this 22" monitor.

That is exactly where we started.

What if you increase layout.css.devPixelsPerPx to a higher value such as 1.5, 1.75 or 2.0 ? I would expect the toolbar area to become more readable, and the content would need to be zoomed out to better fit the window.

That's where the rest of my original reply comes in, using an extension to lower the default zoom level for websites globally.

Darrtz said

I did try wkipedia's css workaround by adding CSS to the profile, but could not get it to show nor work.

I don't know how Wikipedia is relevant. You should only use CSS targeted specifically to what you want to change.

more options

Could you attach a screenshot?

more options

@cor-el

Note - the images are slightly enlarged for readeability:

As you can see, the text in the webpage is perfect for me. However, notice the the location address and the rest of the UI text.

This has been an ongoing problem posted at many linux distribution forums for some time now.

In the past it was not an issue 'cause it looked normal.

In windows 10, it has degraded a bit too - but not as bad as linux.

The workarounds with some addons helped... but now there are none.

@jscher2000

The 'Page Zoom WE' leaves much to be desired. The balancing act between the addon and manually adjusting 'layout.css.devPixelsPerPx' and zoom out just doesn't give me a desireable looking environment.

BTW - the small icons in toolbar do enlarge with 'layout.css.devPixelsPerPx' but not the text relating to the icon.

            and...

The zoom only works on the webpage and not the UI.

Modified by Darrtz

more options

Chosen Solution

Here's an example using a userChrome.css file:

(A) Select and copy all of the following code

/* Classic Menu Bar (windows only?) */
#toolbar-menubar .menubar-text,
#toolbar-menubar menuitem, 
#toolbar-menubar menu {
  font-size: 14px !important;
}

/* Tab bar */
#TabsToolbar {
  font-size: 14px !important;
}

/* Main Toolbar */
#nav-bar {
  font-size: 14px !important;
}

/* Bookmarks Toolbar */
#PersonalToolbar, 
#PersonalToolbar menuitem,
#PersonalToolbar menu {
  font-size: 16px !important;
}

/* Context menus (this is not all of them) */
menupopup[id*="ContextMenu"] menuitem,
menupopup[id*="ContextMenu"] menu, 
#placesContext menuitem, 
#placesContext menu, 
#backForwardMenu menuitem {
  font-size: 14px !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the rules into the editor:

https://www.userchrome.org/download-userchrome-css.html

(See first attached screenshot)

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See second attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See third attached screenshot)

Minimize this window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Mac and Windows; hopefully Linux is similar.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you quit Firefox and start it up again, it should discover that file and apply the rules.

Success?

more options

Excelent ! :D

Just tweaked them down to 12px and all is good.

I remember when Firefox had this available in the profile.

Thanks jscher2000 :)

Modified by Darrtz