Customize address bar font in Firefox

Mozilla Firefox is a popular browser partly because it allows a high number and variety of customizations. You can choose to make any part of the Firefox browser look as you want. In this article we would see, how to customize the address bar font. The address bar is the text box where you type the web site address.

By editing manually

You can edit the the userChrome.css file which resides in the Mozilla configuration folders to customize the style of the address bar font. Follow these instructions :

  1. Press Windows Key + R to open the Run dialog.
  2. Type in the Run dialog, %userprofile%AppDataRoamingMozillaFirefoxProfiles and press Enter
  3. You would find a subfolder named xxxxxxxx.default where x can be any number or letter. Open this folder.
  4. You would find a subfolder chrome inside this folder. Open this folder and you would find a file userChrome.css. If this file does not exist then you would find a file userChrome-example.css, rename it to userChrome.css.
  5. Edit the file userChrome.css and append the following lines at the bottom of the file : 
    #urlbar {font-family: Arial !important;font-size:18px !important;font-weight:bold !important;color:green !important;}
  6. Restart your Firefox browser to see the changes take effect. The above changes make the address bar look like this :

You can choose any font of your like, just replace Arial with your font name. For example, if you want Tahoma font, then make it font-family: Tahoma !important; in the code above. You can choose any font size, just replace 18px with your font size. It can be 16px, 24pt or anything you want. Common units used are pixels (px), points (pt), centimeters (cm) and inches (in).

Similarly, you can choose the font weight from bold, normal, light etc. The font color can also be modified. In the above code, we have set it to green. You can use the basic color names like red, green, blue, yellow etc. or use the hex color codes like #CC4525

For a complete list of options you can use in this CSS file have a look at http://www.w3schools.com/css/css_font.asp.

Through an add-on

There is an add-on which makes the address bar font bigger. You can download and use the add-on from https://addons.mozilla.org/en-US/firefox/addon/97405. Once installed it would make the address bar font bigger. Presently this add-on offers no further customizations, but the author says that in future it would offer more customizations.