Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How do I make these fonts bold?

  • 23 replies
  • 2 have this problem
  • 653 views
  • Paskiausią atsakymą parašė darthhellokitty

more options

As you can see from the screenshot, they are hard to read.

As you can see from the screenshot, they are hard to read.
Pridėtos ekrano nuotraukos

Modified by cor-el

Chosen solution

I notice this line at the bottom of your code that doesn't work for current releases because they changed browser.xul to browser.xhtml as the consequence of moving from XUL to HTML namespace. Best is to leave out and only leave the #PlacesToolbarItems line.

@-moz-document url(chrome://browser/content/browser.xul){
  #PlacesToolbarItems { font-weight: bold !important; }
}

Change to :

 #PlacesToolbarItems { font-weight: bold !important; }

For that tab bar you need the .tabbrowser-tab selector. You may have to adjust the text color as well.

.tabbrowser-tab { font-weight: bold !important; }
Skaityti atsakymą kartu su kontekstu 👍 1

All Replies (20)

more options

Are you possibly using code in userChrome.css that could cause this?

Looks like a problem with the lightweight theme that you use to style the navigator toolbox area with a background image. You can try a different theme to see if you can find one that works better.

Any special reason you use an outdated and no longer supported Firefox version ?

more options

Thanks for the very helpful information, especially the link with all the code. However, I do not see any code to do with this issue at the site. Can you please give me the lines of code I need to add to the userchrome.css file?

The reason am using an older version is deliberate as the add-ons I want have stopped working with the new versions.

Modified by Fire Marshal Bil

more options

One more question. I would like the tab fonts to be bold and black. What line would I add to the userchrome.css file to accomplish this? I modified it around to match what I want but this one eludes me. This is the only one that even came close.

#PlacesToolbarItems { font-weight: bold !important; }

Pl. see screenshot. Thanks. Here is the entire code:

/* 4. TABS: on bottom [display: block !important;] is a fix for ff 71*/
/* Those 2 lines, maybe don't need. */
/* #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} */
/* #TabsToolbar {-moz-box-ordinal-group:1000!important} */

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

.tab-background[selected="true"] {
    background-attachment: none!important;
    background-color: #d0850d!important;
    background-image: none!important;
    background-position: none!important;
    background-repeat: none!important;
    background-size: none!important;
}

/* ROUNDED INACTIVE TABS */
.tabbrowser-tab::after, .tabbrowser-tab::before {
border-left: none !important;
}
.tab-background {
border-radius: 12px 12px 0px 0px !important;
}
.tab-line {
display: none !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

:root #tabbrowser-tabs {
 --tab-min-height: 28px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -0px inset, -moz-dialog 0 0px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* 6. drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

/* 7. Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Combine nav and menu bars */
#nav-bar {
	padding-left: 310px !important;
}

#toolbar-menubar {
	-moz-box-ordinal-group: 2 !important;
	min-height: .1px !important;
	max-height: 0px !important;
}

#main-menubar {
	z-index: 1;
	height: 32px !important;
	position: absolute !important;
}

#PersonalToolbar {
	-moz-box-ordinal-group: 4 !important;
}

/* Change the bookmarks folder color */

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

.bookmark-item[container] {
  fill: red  !important;
}

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

@-moz-document url(chrome://browser/content/browser.xul){

#PlacesToolbarItems { font-weight: bold !important; }

}

Modified by cor-el

more options

The code you posted is for the Bookmarks Toolbar.

#PlacesToolbarItems { font-weight: bold !important; }

Your first screenshot shows the menu bar. That would be this code.

#menubar-items { font-weight: bold !important; }
more options

Thanks kindly.

So, I added the line: #menubar-items { font-weight: bold !important; } to the end of the css file inside the flower bracket and rebooted Firefox, but nothing has changed. The fonts on the tabs are still not bolded. Any suggestions?

TIA.

more options

Chosen Solution

I notice this line at the bottom of your code that doesn't work for current releases because they changed browser.xul to browser.xhtml as the consequence of moving from XUL to HTML namespace. Best is to leave out and only leave the #PlacesToolbarItems line.

@-moz-document url(chrome://browser/content/browser.xul){
  #PlacesToolbarItems { font-weight: bold !important; }
}

Change to :

 #PlacesToolbarItems { font-weight: bold !important; }

For that tab bar you need the .tabbrowser-tab selector. You may have to adjust the text color as well.

.tabbrowser-tab { font-weight: bold !important; }
more options

For all items in the navigator-toolbox you can use this code instead of the individual CSS selectors.

#navigator-toolbox { font-weight: bold !important; }
more options

Thank you so much for all your valuable help.

I added the following two lines and got exactly what I wanted:

#PlacesToolbarItems { font-weight: bold !important; }
#tabbrowser-tabs { font-weight: bold !important; }

Modified by cor-el

more options

I also need to bold my menu bar!

Do I need to create a userchrome.css file, or is it already present somewhere? Do I create and/or edit it with a text editor (i.e. Notepad) or do I need to do it in some other way?

If I create the file, do I just need to put #PlacesToolbarItems { font-weight: bold !important; } in the file, or is there additional code that needs to go into it?

I'm surprised there isn't an add-on to do all this! Apparently Theme Font & Size Changer used to do it, but it no longer works.

Thanks so much.

more options

The code for the menu bar is in the first reply:

#menubar-items { font-weight: bold !important; }
more options

Thanks! Now, do I add it to userchrome.css, or do I have to create userchrome.css and put that in it? Is there meant to be anything else in userchrome.css besides that line? Do I create and/or edit userchrome.css with notepad?

Are there meant to be two spaces between the brackets and the text in the code?

more options

userChrome.css doesn't exist by default, so if you haven't used it before in your current profile then you need to create a new userChrome.css.

Add code to the userChrome.css file below the default @namespace line.


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

#menubar-items { font-weight: bold !important; }

It is not that difficult to create if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name (name is case sensitive). In this text file you paste the text posted. On Mac you can use the TextEdit utility to create the file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named .txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the file.

See also:

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true
more options

OK, here's what I've got now. I created userchrome.css, and I copied the text from your answer into it. I saved it, opened Firefox back up, and... nothing changed.

more options

I assume you have the menu bar visible (View -> Toolbars).

  • you can tap the Alt key or press the F10 key to show the hidden Menu Bar temporarily

Did you also make sure you enabled userChrome.css and set toolkit.legacyUserProfileCustomizations.stylesheets = true on the about:config page like I wrote in my above post ?

more options

I'm attaching a screen shot of the menu bar as it is now. I keep it up there whenever I use Firefox. I just can't get the menu bar text to be bold.

I also set toolkit.legacyUserProfileCustomizations.stylesheets as true on the about:config page.

more options

Do other rules in userChrome.css work to test if Firefox reads and processes the file ?

/* FONT-SIZE: URLBAR FINDBAR */
:-moz-any(#urlbar-container, .findbar-container) { font-size:12pt !important; }

more options

That one works! Is there a code to make the menu bar bigger like that? That would be almost as good as bold.

more options

You can use the same selector, but use or add a font-size rule. This applies to all toolbars:

#navigator-toolbox { font-size:12pt !important; }

Selector for the menus on the menu bar:

#menubar-items { font-size:12pt !important; }

I prefer a monospace font to make it easier to read and edit text in the location bar and use this code:

.urlbar-input-box, .findbar-textbox {font-size:11pt!important; font-family:"DejaVu Sans Mono"}

more options

Here's what my userchrome.css file looks like. Making the location bar larger and smaller works easily. Making the menu headings larger or bold doesn't work at all. :-(

I've got toolkit.legacyUserProfileCustomizations.stylesheets and userchrome.css both marked as true in about:config. I don't know what else to do!

more options

Maybe try more specific code.

#menubar-items .menubar-text { font-size:12pt !important; }

You can try to omit the @namespace line.


You can use the Browser Toolbox to check out existing rules.

To enable the Browser Toolbox, see:

  1. 1
  2. 2