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.

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