Change Firefox Font Size Of Address, Tab And Status Bar

The Firefox web browser offers no native options to change the font of the address bar, tab bar and status bar from within the web browser.

While most users may not have issues with the default font size and type, others may prefer a larger or even smaller size.

Advanced users can edit the css in userchrome.css  in the user profile to change the font of the three browser interface elements. Most users on the other hand may feel uncomfortable editing the file (or creating it in first place) and may prefer an automated solution instead.

Make Font Size Bigger Pack

Make Font Size Bigger Pack is a Firefox add-on that increases the font size of fonts in the Firefox address bar, tab bar and status bar automatically after installation.

The new font sizes are automatically enabled after installation of the add-on and a restart of the web browser.

The pack combines two add-ons of the same developer in one add-on. Firefox users can also download the Make Address Bar Bigger and Make Tab Bar And Status Bar Bigger add-ons instead in case they only need one of those.

There are no configuration options currently, but the developer promises to update the add-on soon with options to edit the font size, and an option to enable or disable the add-on in the Firefox web browser.

Changing Firefox's font size manually

Firefox users who prefer to change the font sizes, colors and fonts in general can edit the userchrome.css file directly which is located in the chrome directory of the Firefox profile folder.

The easiest option to locate it is to load about:support in Firefox's address bar, and to click on the show folder button that is displayed on the page that opens near the top.

If the chrome directory does not exist create it. Similarly, create the file userchrome.css in the chrome directory and open it afterwards in a plain test editor.

Add the following line to the top:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

You need to modify font-family, color, or font-size to adjust them accordingly when you paste the following code snippets into the userchrome.css file.

/*Change address bar font, color and size*/
#urlbar {-moz-appearance: none !important;
font-family: Tahoma Bold !important;
color: Black !important;
font-size: 12pt !important; }

The above code changes the font of the address bar to Tahoma Bold with a font size of 12pt and the black color. Just replace the values with others if you prefer those.

/* Change status bar text color/size*/
#status-bar {-moz-appearance: none !important; font: bold 12pt Arial; !important;
}

The code above changes the font of the status bar to 12pt Arial.

/* Active tab - good */
.tabbrowser-tab[selected="true"]
.tabs-bottom,
[class="close-button tabs-closebutton"] {
font-weight: bold !important;
background-color: rgb(220,220,220) !important;
padding-left: 2% !important;
padding-right: 2% !important;}

/* Inactive Tab - good */
.tabbrowser-tab:not([selected="true"]) {
-moz-appearance: none !important;}

The code above puts more weight to the active tab. You can modify the fonts as well using the examples above.

Update: The add-ons have been discontinued. A new add-on is available that offers a similar functionality. Theme Font & Size Changer is available for direct installation over at the Mozilla website.

Advertisement