How to customize Firefox devtools fonts

firefox-devtools.md

1. Open ~/.mozilla/firefox/<your_profile>/chrome/userContent.css (create it if does not exist).

2. Paste the following content in it.

    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document regexp("chrome://browser/content/devtools/**/.*"){
        .devtools-monospace {
            font-family: Consolas, monospace !important;
            font-size: 8pt !important;
        }
    }
   

3. Restart Firefox.

it can't change the font&size for debuger pane !

don't work on Firefox DE 73 on linux

Try this:

(6) Set Firefox to look for userChrome.css at startup (updated 5/24/2019)
To make startup faster for most users, Firefox 69 will no longer look for this file automatically. You need to tell it to look. Here's how:

1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
2. In the search box above the list, type or paste userprof and pause while the list is filtered. If you do not see anything on the list, please ignore the rest of these instructions. You can close this tab now.
3. Double-click the toolkit.legacyUserProfileCustomizations.stylesheets preference to switch the value from false to true. That change should take effect on your next startup.

@vbsessa yup, i did it and FF loads my userChrome.css. I tested the below code and the style has been applied to the FF window.

* {
    color: yellow !important;
}

Howerver the code on the top post don't work on my FF.

This is my userChrome.css and it's working i think.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document
    url("chrome://devtools/markup-view.xhtml"),
    url("chrome://devtools/cssruleview.xhtml"),
    url("chrome://devtools/computedview.xhtml"),
    url("chrome://devtools/fontinspector/font-inspector.xhtml"),
    url("chrome://devtools/webconsole.xul") {
    * {
        font-size: 9pt !important;
        font-family: 'Consolas', monospace !important;
    }
}

Tested on firefox 72.

Not working T.T
win10 / 73.01

Not working T.T
win10 / 73.01

Sorry i can't help any further, i'm running linux.
Did you try this?

Not working, Win 10, Firefox 75

Not working, Linux Manjaro, Firefox 77.0

Works with Pale Moon

This one works on FF => 68.0 Linux with userChrome.css or userContent.css. Inspector tools are now using CSS variables and the inspector tree itself is loaded in an iframe so none of the tweaks actually worked esp. with .CodeMirror classes.

You can find all the variables in this file (just copy paste below URL in FF to view source)

resource://devtools/client/themes/variables.css

For the userChrome.css part here's what solved it for me.

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

:root {
  /* Text sizes */
  --theme-code-font-size: 13px !important;
}

If userChrome.css is not loaded create userContent.css and add the same rulesets. Tried and tested on FF Mac/Linux 89

No longer works on firefox 102

Works fine but you have to put it in userContent.css and NOT userChrome.css as devtools are considered content panes.

Updated according to @jgentil words.

I recommend perusing this link if you're having troubles:
https://www.userchrome.org/how-create-userchrome-css.html

And as @jgentil said, replace userChrome.css with userContent.css for devtools customization.

@-moz-document url-prefix("chrome://devtools/content"){
.devtools-monospace {
font-family: "Cascadia Mono", "Consolas", "Sarasa Gothic SC", "Microsoft Yahei UI" !important;
}
}

put it in userContent.css