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.

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