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

The font for Develop Tools won't change?

  • 17 replies
  • 3 have this problem
  • 4649 views
  • Last reply by tgvita

more options

My userChrome.css file is in the right place and is working.

The code I'm using in order to change my font (make it bigger):

.devtools-monospace {

 font-family: "Consolas" !important;
 font-size: 12px !important;

}

But nothing happens. Why?

Thank you very much,

Chosen solution

This may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try:

@-moz-document url-prefix(chrome://devtools/content/) {
  /* Some rules */
}
Read this answer in context 👍 1

All Replies (17)

more options
more options

Where in the developer tools is this selector used? I see it in some body tags if I search on DXR. Modifying the developer tools isn't easy and straightforward and can be a lot of trial and error (@namespace issues).

I use an @import rule in userChrome.css to import a separate devtools.css file for all changes made. This file doesn't have the default @namespace rule at the start.

This is an example:

/* inspector: tree */
@-moz-document url(chrome://devtools/content/markupview/markup-view.xhtml){
 *|* {font-size:10pt!important; font-weight:bold}
}

See also:

Modified by cor-el

more options
more options

Ok, guess did not see the USSER CHROME URL's for your code : https://www.accessfirefox.org/Theme-Font-Size-Changer.php

more options

cor-el said

Where in the developer tools is this selector used? I see it in some body tags if I search on DXR. Modifying the developer tools isn't easy and straightforward and can be a lot of trial and error (@namespace issues). I use an @import rule in userChrome.css to import a separate devtools.css file for all changes made. This file doesn't have the default @namespace rule at the start. This is an example:
/* inspector: tree */
@-moz-document url(chrome://devtools/content/markupview/markup-view.xhtml){
 *|* {font-size:10pt!important; font-weight:bold}
}

See also:

cor-el, I tried your example code. It didn't work.

more options

Note that the code won't work directly in userChrome.css You really need to use a separate file via @import url(devtools.css); in userChrome.css.

This code is for the left panel in the Inspector that shows the markup code. the body has this class name.

<body xmlns="http://www.w3.org/1999/xhtml" class="theme-body devtools-monospace" role="application">

I can see that the code is applied.

@-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){
 body {
   font-family: "Consolas" !important;
   font-size: 12px !important;
   font-weight: bold;
 }
}
more options

cor-el said

Note that the code won't work directly in userChrome.css You really need to use a separate file via @import url(devtools.css); in userChrome.css. This code is for the left panel in the Inspector that shows the markup code. the body has this class name.
<body xmlns="http://www.w3.org/1999/xhtml" class="theme-body devtools-monospace" role="application">

I can see that the code is applied.

@-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){
 body {
   font-family: "Consolas" !important;
   font-size: 12px !important;
   font-weight: bold;
 }
}

cor-el, yes that changed font in the inspector left pane thank you! But how do I reach the other panes (Debugger, Style Editor, Console etc.)? You also provided this line of code: <body xmlns="http://www.w3.org/1999/xhtml" class="theme-body devtools-monospace" role="application"> And I don't understand what to make of it. It's not CSS. What is it for?

Thank you!

more options

That is the HTML code of the left panel in the Inspector, so you can see that it has the class name you posted above (.devtools-monospace)

Each of the panels has it own chrome URI.

@-moz-document 
url(chrome://devtools/content/framework/toolbox-options.xhtml),
url(chrome://devtools/content/inspector/inspector.xhtml),
url(chrome://devtools/content/webconsole/webconsole.xhtml),
url(chrome://devtools/content/debugger/new/index.html),
url(chrome://devtools/content/memory/memory.xhtml),
url(chrome://devtools/content/netmonitor/index.html),
url(chrome://devtools/content/dom/dom.html) {
 body {
   font-family: "Consolas" !important;
   font-size: 12px !important;
   font-weight: bold;
 }
}
@-moz-document
url(chrome://devtools/content/styleeditor/styleeditor.xul),
url(chrome://devtools/content/performance/performance.xul),
url(chrome://devtools/content/storage/storage.xul),
url(chrome://devtools/content/scratchpad/scratchpad.xul){
 * {
   font-family: "Consolas" !important;
   font-size: 12px !important;
   font-weight: bold;
 }
}

Modified by cor-el

more options

Chosen Solution

This may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try:

@-moz-document url-prefix(chrome://devtools/content/) {
  /* Some rules */
}
more options

cor-el said

That is the HTML code of the left panel in the Inspector, so you can see that it has the class name you posted above (.devtools-monospace)

I knew it was the HTML code. I didn't understand why you posted it. And I still don't understand. You said "so you can see that it has the class name you posted above". So what? What's the use of it? The class .devtools-monospace didn't work for me, it changed nothing as you could see from my first post. So, I was quite perplexed obviously.

cor-el said

@-moz-document url(chrome://devtools/content/framework/toolbox-options.xhtml), url(chrome://devtools/content/inspector/inspector.xhtml), url(chrome://devtools/content/webconsole/webconsole.xhtml), url(chrome://devtools/content/debugger/new/index.html), url(chrome://devtools/content/styleeditor/styleeditor.xul), url(chrome://devtools/content/performance/performance.xul), url(chrome://devtools/content/memory/memory.xhtml), url(chrome://devtools/content/netmonitor/index.html), url(chrome://devtools/content/storage/storage.xul), url(chrome://devtools/content/dom/dom.html), url(chrome://devtools/content/scratchpad/scratchpad.xul)

Thank you for those. May I ask you where do you get them from? Is there any reference that describes how to reach all the elements of Web developer tools in FF in plain English? Or maybe there's some other way to find it other than asking it here? That would be really useful to me, because your examples are great but they don't do exactly what I want (i.e. they don't reach all the element where I want to change the font-size).

Thank you!

more options
more options

jscher2000 said

This may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try: @-moz-document url-prefix(chrome://devtools/content/) { /* Some rules */ }

That worked like a charm! jscher2000, thank you very much. That was a great help!

more options

cor-el said

See:

cor-el, thank you very much for all you help!

more options

Ahu_Lee said

cor-el said
See:

cor-el, thank you very much for all you help!

  • your
more options

Ahu_Lee said

My userChrome.css file is in the right place and is working. The code I'm using in order to change my font (make it bigger): .devtools-monospace { font-family: "Consolas" !important; font-size: 12px !important; } But nothing happens. Why? Thank you very much,

Ahu_Lee said

jscher2000 said
This may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try: @-moz-document url-prefix(chrome://devtools/content/) { /* Some rules */ }

That worked like a charm! jscher2000, thank you very much. That was a great help!

Update

I would like to add that jscher2000's example changed font-size everywhere I wanted except for the debugger code pane. I've found out that it could be changed via CodeMirror-line class. So, the whole thing now looks like this (just in case it may be useful to someone else):

@-moz-document url-prefix(chrome://devtools/content/) {

 body, .CodeMirror-line {
  font-family: "Consolas" !important;
  font-size: 14px !important;
  font-weight: normal;
}

}

more options

Ahu_Lee said

Ahu_Lee said
My userChrome.css file is in the right place and is working. The code I'm using in order to change my font (make it bigger): .devtools-monospace { font-family: "Consolas" !important; font-size: 12px !important; } But nothing happens. Why? Thank you very much,

Ahu_Lee said

jscher2000 said
This may have unintended consequences, but if all the same rules are applicable to all the developer tools panels, you could try: @-moz-document url-prefix(chrome://devtools/content/) { /* Some rules */ }

That worked like a charm! jscher2000, thank you very much. That was a great help!

Update

I would like to add that jscher2000's example changed font-size everywhere I wanted except for the debugger code pane. I've found out that it could be changed via CodeMirror-line class. So, the whole thing now looks like this (just in case it may be useful to someone else):

@-moz-document url-prefix(chrome://devtools/content/) {

 body, .CodeMirror-line {
  font-family: "Consolas" !important;
  font-size: 14px !important;
  font-weight: normal;
}

}

this piece works for Inspectors and Debuggers and CSS editors, but not Console.

more options

@-moz-document url-prefix(chrome://devtools/content/) {

 body, .CodeMirror-line {
  font-family: "InconsolataGo" !important;
  font-size: 16px !important;
  font-weight: normal;
 }

}

 div, [platform="linux"]:root .devtools-monospace{
   font-size: 16px !important;
 }

add the above codes to userChrome.css fixed all of my issue, all fonts in the dev tool will be modified.