Change Firefox Font Size Of Address, Tab And Status Bar - gHacks Tech News

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.

firefox fonts bigger

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.

Summary
Change Firefox Font Size Of Address, Tab And Status Bar
Article Name
Change Firefox Font Size Of Address, Tab And Status Bar
Description
Find out how to change the default font size of Firefox's address bar to make text bigger or smaller in the web browser.
Author
Publisher
Ghacks Technology News
Logo

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:

Comments

  1. jonas said on March 26, 2010 at 4:59 pm
    Reply

    excellent for my htpc!

  2. Shrijit said on March 26, 2010 at 5:41 pm
    Reply

    Earlier I agreed with the dev that he has not copied my stylish script, but now I can say that. BAD!

    My stylish script is not an addon. It requires “STYLISH” add on , and after that you can simply install from http://userstyles.org/styles/25747. No need of restart and editing of styles is much more simpler.

  3. CoolCatBad said on March 26, 2010 at 11:06 pm
    Reply

    Thanks, Martin. I put all that in my userchrome.css, what I want to know is how to increase font size of Context Menu.

  4. jonny said on March 27, 2010 at 5:47 am
    Reply

    Regarding CoolCatBad’s question, Visit this link on css and info on customizing the context menu in Firefox,

    http://kb.mozillazine.org/Firefox_:_Tips_:_Customize_context_menu

    Also regarding the comments by Shrijit. Use the DOM inspector, and any one willing to learn, can write css that targets the DOM via Selectors. You can see the ID’s used in the different elements that make up Firefox. Also you can inspect your Firefox folders on your computer and view the different CSS Selectors that make up Firefox.

    So saying that i copied your stylish script is ridiculous! CSS is fun to write!

  5. Anonymous said on March 30, 2011 at 4:20 pm
    Reply

    missing } at the end of inactive tab good

    1. Martin Brinkmann said on March 30, 2011 at 5:00 pm
      Reply

      You are right, corrected. Thanks for spotting.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

Please note that your comment may not appear immediately after you post it.