How to change the firefox address line (urlbar) font size

I have always found the default font size for the address bar in firefox to be too small but, unlike almost all other aspects of firefox, it was a bit of a challenge to change. You had to manually edit a file called userChrome.css that lived under your home directory tree in a firefox configuration directory. That directory was named ~/.mozilla/firefox/*.default/chrome under linux. On windows it was in the user AppData directory tree.

Each time a new version of firefox was released I would go to that directory and edit the file to describe the font characteristics that I liked.

Unfortunately, when I installed firefox 10, the chrome part of subdirectory was not present.

My first thought was that the paradigm had changed but figured that I would try the old method to see whether it would work and save some search time. It did!

The only differences between the current version and the older versions is that you have to create the chrome subdirectory and you no long have the userChrome-example.css template.

It is very simple to do. Here are the step by step instructions.

Step 1. Create the chrome directory

First create the chrome subdirectory in your local firefox directory tree. The table below shows the location of the firefox directory tree on the platforms that I tested.

Platform Directory Path
LINUX ~/.mozilla/firefox/*.default/chrome
MAC OS X ~/Library/Application\ Support/Firefox/Profiles/*.default/chrome/
WINDOWS c:\User\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\*.default\chrome

Step 2. Create userChrome.css

Next you need to create the userChrome.css file in the chrome directory. The contents are the same on both platforms.

Step 3. Restart Firefox

Finally you need to restart firefox.

Here is what the result looks like.

9 thoughts on “How to change the firefox address line (urlbar) font size”

  1. Thanks for the tip! I was actually looking to change the lenght of the address bar, that in Firefox 10 looks too big compared with the previous version that i had. Found this tip instead, that i could use in Linux.

    I’ll keep searching for the change of lenght, though.

    1. I am not sure which CSS file you are referring to. Can you provide more details including the O/S you are working with and the version of Firefox?

      Please note that the main point of the blog post is that the CSS does not exist and that it has to be created so you are not expected to be able to find it.

    1. Sure, you should be able to insert CSS content before the URL address bar data by adding something like this to your userChrome.css file:

      /* insert a custom prefix */
      #urlbar:before {
      content:"prefix: ";
      }

      If that does not place the text where you want it then you might try invoking the DOM inspector (Tools –> Web Developer –> Inspector) to determine the correct DOM item and then use the same technique to insert the content.

  2. Hi Joe,

    The effect you obtained on your linux machines is brilliant!! I work in an environment where I have continuous interaction with different urls and this feature would be a major helper in spotting the differences between them. Extending this to even three or four colours after each “/”  would be so awesome. Sadly, as you mentioned, this does not have the same behavior on windows. I have been looking for something like this for quite some time, but did not find anything so far. May I ask, are you aware by any means of any FF extension or tweak that can replicate this?

    Thank you,

    MR

     

     

    1. You can update the URLs on windows if you are using Firefox. That is described in step 1. I do not know of a way to do this in Internet Explorer.

      I do not know of a firefox tweak or extension that can change the URL bar color based on content but it should be easy to do using a bit of javascript. Here is one idea: look for a mouse exit event on “#urlbar”, capture the contents, match them to a predefined set and change the text color accordingly. I use jquery for this type of thing.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.