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

The current solution for this - add the following to userContent.css:

/* --------------------------------------------------------------------
/* DevTools
*/
@-moz-document url-prefix("chrome://devtools/content/")
{
    :root {
        --theme-code-font-size: 13px !important; /* Inspector */
        /* --theme-body-font-size: 24px !important; /* Some of UI */
    }

    /* Most DevTools text */
    .devtools-monospace {
        font-family: "Source Code Pro", Consolas, monospace, -moz-fixed !important;
        font-size: 13px !important;
        font-weight: 400 !important;
    }

    /* Main tree view in the HTML inspector */
    .inspector-panel #markup-view {
        font-family: "Source Code Pro", Consolas, monospace, -moz-fixed !important;
        font-size: 13px !important;
        font-weight: 400 !important;
    }
}