Can't change font size in JSON viewer

[szx]

Is there a way to change the font family and size of text displayed in the default JSON viewer? i.e. when you open an application/json URL.

I know that we can use Ctrl/Cmd-+ to change the font size, but it also affects the size of all pages on the same domain, which is what I don't want to do. For example, when I visit my site on localhost, it will change the size of text for all localhost pages, not just JSON content.

Additionally, there appears to be no way to change the font family. I've tried changing the monospace font in Firefox settings but it does not have any effect here. The default font (DejVu Sans Mono) looks really bad on my computer for some reason (probably has to do with anti-aliasing, which is typically a problem in many apps in Ubuntu) and I'd like to change it to something better.

[jscher2000]

The JSON viewer is part of the Developer Tools panels, so add-ons are not allowed to modify it. I can suggest an unofficial method.

Regarding the font family, I'm guessing you are on Linux, and the font face should follow your selection on the Settings/Preferences page:

:root[platform="mac"] {
  --monospace-font-family: Menlo, monospace;
}
:root[platform="win"] {
  --monospace-font-family: Consolas, monospace;
}
:root[platform="linux"] {
  --monospace-font-family: monospace;
}

Please note that the Fonts dialog allows different Monospace fonts for different character sets, and you may need to modify more than one of them to resolve that issue.

The unofficial, community-supported option involves creating a userContent.css file that can apply custom style rules to the developer tools. userContent.css is the lesser known cousin of userChrome.css, a file you can create to restyle the user interface. A rule such as the following applies a standard 16px font size, which is substantially larger than the default, which might be around half that size. You can adjust as needed:

/*** JSON Viewer - Upsize Font ***/
body > div#content > div.tabs > div.panels > #json-panel > div.json *,
body > div#content > div.tabs > div.panels > #rawdata-panel > div.rawdata *,
body > div#content > div.tabs > div.panels > #headers-panel > div.headers * {
	font-size: 16px !important;
}

I have more information about how to set Firefox up to use userChrome.css/userContent.css files on my site at https://www.userchrome.org/ and you can get expert advice on the following subreddit: https://www.reddit.com/r/FirefoxCSS/.

[szx]

Thanks. Unfortunately this CSS doesn't seem to have any effect, despite that I have enabled toolkit.legacyUserProfileCustomizations.stylesheets in about:config. Do you know why else it might not work?

[jscher2000]

As a Windows person, I'm not good at troubleshooting issues on Linux. If you haven't already, could you try over on the r/FirefoxCSS subreddit:

https://www.reddit.com/r/FirefoxCSS/

[szx]

Thanks. Unfortunately this CSS doesn't seem to have any effect, despite that I have enabled toolkit.legacyUserProfileCustomizations.stylesheets in about:config. Do you know why else it might not work?