X
Tap here to go to the mobile version of the site.

Support Forum

The font for Develop Tools won't change?

Posted

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,

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

Additional System Details

Installed Plug-ins

  • Shockwave Flash 28.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; rv:57.0) Gecko/20100101 Firefox/57.0

More Information

Shadow110 1072 solutions 14836 answers
Sorry no idea but try this : https://addons.mozilla.org/en-US/firefox/addon/theme-font-size-changer/ USSER CHROME URL'S https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/ http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html https://github.com/Aris-t2/CustomCSSforFx/issues/1 https://www.accessfirefox.org/Theme-Font-Size-Changer.php https://www.userchrome.org/ https://www.accessfirefox.org/Firefox_Accessibility_Themes.php https://www.userchrome.org/what-is-userchrome-css.html http://kb.mozillazine.org/UserChrome.css https://github.com/axydavid/FirefoxUI/blob/master/README.md https://github.com/wilfredwee/photon-australis https://www.reddit.com/r/FirefoxCSS/ Note not all code in one place. Please let us know if this solved your issue or if need further assistance.
cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157346 answers

Helpful Reply

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:

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: <pre><nowiki>/* inspector: tree */ @-moz-document url(chrome://devtools/content/markupview/markup-view.xhtml){ *|* {font-size:10pt!important; font-weight:bold} }</nowiki></pre> See also: *https://dxr.mozilla.org/mozilla-release/source/devtools/client/themes/common.css

Modified by cor-el

Question owner

''Pkshadow [[#answer-1060806|said]]'' <blockquote> Sorry no idea but try this : https://addons.mozilla.org/en-US/firefox/addon/theme-font-size-changer/ USSER CHROME URL'S https://www.howtogeek.com/334716/how-to-customize-firefoxs-user-interface-with-userchrome.css/ http://techdows.com/2017/09/classic-theme-restorer-userchrome-css-modify-firefox-57-photon-ui.html https://github.com/Aris-t2/CustomCSSforFx/issues/1 https://www.accessfirefox.org/Theme-Font-Size-Changer.php https://www.userchrome.org/ https://www.accessfirefox.org/Firefox_Accessibility_Themes.php https://www.userchrome.org/what-is-userchrome-css.html http://kb.mozillazine.org/UserChrome.css https://github.com/axydavid/FirefoxUI/blob/master/README.md https://github.com/wilfredwee/photon-australis https://www.reddit.com/r/FirefoxCSS/ Note not all code in one place. Please let us know if this solved your issue or if need further assistance. </blockquote> '''Pkshadow''', thank you very much but I would prefer not to use any addons for such a basic task as changing the font-size.
Shadow110 1072 solutions 14836 answers

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

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

Question owner

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.

''cor-el [[#answer-1060814|said]]'' <blockquote> 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: <pre><nowiki>/* inspector: tree */ @-moz-document url(chrome://devtools/content/markupview/markup-view.xhtml){ *|* {font-size:10pt!important; font-weight:bold} }</nowiki></pre> See also: *https://dxr.mozilla.org/mozilla-release/source/devtools/client/themes/common.css </blockquote> '''cor-el''', I tried your example code. It didn't work.
cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157346 answers

Helpful Reply

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;
 }
}
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. <pre><nowiki><body xmlns="http://www.w3.org/1999/xhtml" class="theme-body devtools-monospace" role="application"></nowiki></pre> I can see that the code is applied. <pre><nowiki>@-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){ body { font-family: "Consolas" !important; font-size: 12px !important; font-weight: bold; } }</nowiki></pre>

Question owner

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!

''cor-el [[#answer-1060848|said]]'' <blockquote> 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. <pre><nowiki><body xmlns="http://www.w3.org/1999/xhtml" class="theme-body devtools-monospace" role="application"></nowiki></pre> I can see that the code is applied. <pre><nowiki>@-moz-document url(chrome://devtools/content/inspector/markup/markup.xhtml){ body { font-family: "Consolas" !important; font-size: 12px !important; font-weight: bold; } }</nowiki></pre> </blockquote> '''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!
cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157346 answers

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;
 }
}
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. <pre><nowiki>@-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; } } </nowiki></pre>

Modified by cor-el

jscher2000
  • Top 10 Contributor
8637 solutions 70650 answers

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

Question owner

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!

''cor-el [[#answer-1060959|said]]'' <blockquote> 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) </blockquote> 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 [[#answer-1060959|said]]'' <blockquote> @-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) </blockquote> 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!
cor-el
  • Top 10 Contributor
  • Moderator
17416 solutions 157346 answers
See: *https://developer.mozilla.org/Tools/Browser_Toolbox

Question owner

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!

''jscher2000 [[#answer-1060979|said]]'' <blockquote> 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 */ } </blockquote> That worked like a charm! '''jscher2000''', thank you very much. That was a great help!

Question owner

cor-el said

See:

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

''cor-el [[#answer-1060985|said]]'' <blockquote> See: *https://developer.mozilla.org/Tools/Browser_Toolbox </blockquote> '''cor-el''', thank you very much for all you help!

Question owner

Ahu_Lee said

cor-el said
See:

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

  • your
''Ahu_Lee [[#answer-1060987|said]]'' <blockquote> ''cor-el [[#answer-1060985|said]]'' <blockquote> See: *https://developer.mozilla.org/Tools/Browser_Toolbox </blockquote> '''cor-el''', thank you very much for all you help! </blockquote> *your

Question owner

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;
}

}

''Ahu_Lee [[#question-1198481|said]]'' <blockquote> 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, </blockquote> ''Ahu_Lee [[#answer-1060986|said]]'' <blockquote> ''jscher2000 [[#answer-1060979|said]]'' <blockquote> 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 */ } </blockquote> That worked like a charm! '''jscher2000''', thank you very much. That was a great help! </blockquote> '''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; } }
tgvita 0 solutions 2 answers

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.

''Ahu_Lee [[#answer-1061007|said]]'' <blockquote> ''Ahu_Lee [[#question-1198481|said]]'' <blockquote> 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, </blockquote> ''Ahu_Lee [[#answer-1060986|said]]'' <blockquote> ''jscher2000 [[#answer-1060979|said]]'' <blockquote> 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 */ } </blockquote> That worked like a charm! '''jscher2000''', thank you very much. That was a great help! </blockquote> '''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; } } </blockquote> this piece works for Inspectors and Debuggers and CSS editors, but not Console.
tgvita 0 solutions 2 answers

@-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.

@-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.