Skip to content

Instantly share code, notes, and snippets.

@vbsessa

vbsessa/firefox-devtools.md

Last active August 31, 2024 12:59
Show Gist options
  • Save vbsessa/6150f39d1e92699e9c2f49e58fcbcc03 to your computer and use it in GitHub Desktop.
Save vbsessa/6150f39d1e92699e9c2f49e58fcbcc03 to your computer and use it in GitHub Desktop.
Download ZIP
How to customize Firefox devtools fonts
Raw
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.

@aleclarson
Copy link

aleclarson commented Nov 5, 2022 •
edited
Loading

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.

@kidzgy
Copy link

kidzgy commented Aug 30, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment