ghacks Technology News

Change Firefox Font Size Of Address, Tab And Status Bar

The Firefox web browser offers no options to change the fonts of the address bar, tab bar and status bar from within the web browser. Advanced users can manually edit the css in userchrome.css to change the font of those three browser elements but many users will probably prefer an easier way to change the fonts in Firefox without editing configuration files.

The Make Font Size Bigger Pack is a Firefox add-on that will automatically increase the font size of the fonts in the Firefox address bar, tab bar and status bar. 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.

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. It can be that only a userchrome-example.css is available, just remove the -example part from the url in that case.

/*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.

Enjoyed the article?: Then sign-up for our free newsletter or RSS feed to kick off your day with the latest technology news and tips, or share the article with your friends and contacts on Facebook or Twitter.

Related Articles:

Increase Firefox Address Bar Font Size
Change Firefox’s Default Font With Theme Font And Size Changer
Firefox Theme Font Size Changer
Font Cubes Font Collection
AMP Font Viewer An Advanced Font Manager



About the Author:Martin Brinkmann is a journalist from Germany who founded Ghacks Technology News Back in 2005. He is passionate about all things tech and knows the Internet and computers like the back of his hand. You can follow Martin on Facebook or Twitter.

Author: , Friday March 26, 2010 -
Tags:, , , , ,


Responses so far:

  1. jonas says:

    excellent for my htpc!

  2. Shrijit says:

    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 says:

    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 says:

    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 says:

    missing } at the end of inactive tab good

Leave a Reply   Follow Ghacks   Subscribe To Comment Rss

Subscribe without commenting

© 2005-2012 Ghacks.net. All Rights Reserved. Privacy Policy - About Us