How to edit CSS / Styling of Firefox Reader View

Question

I want to include a font of my choice in Firefox Reader View Styling.

Please let me know if Firefox uses a local CSS file for styling or it is located somewhere else?

Moreover What is the CSS File name Firefox uses for Reader View and how can I edit the same.

Thanks in Advance!

Answer 1

You find the CSS file for the "Firefox Reader View" under the path cd /home/$USER/.mozilla/firefox/<PROFILE_FOLDER>/chrome/userContent.css only if you already did set it up:

1. Enter in your Firefox URL-search-bar: about:support.
2. Open your Profile Folder by selecting Show Folder.
3. Create a new folder inside your profile folder called chrome.
4. Navigate into chrome and create a new plain-text file called userContent.css
5. Edit userContent.css according to your CSS preferences.
6. In new Firefox profiles, starting from Firefox 69, you additionally have to enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config, cf. Firefox 69: userChrome.css and userContent.css disabled by default.

---

In my case it looked like the following:

cd /home/$USER/.mozilla/firefox/<PROFILE_FOLDER>/
mkdir chrome
cd ./chrome
touch userContent.css

CSS-Example:

@-moz-document url-prefix("about:reader") {
  body.dark {
    color: salmon !important;
    background-color: black !important;
  }
  body.light {
    color: #222 !important;
    background-color: #EEE !important;
  }
  body.sepia {
    color: #5B4636 !important;
    background-color: #F4ECD8 !important;
  }

  body.serif {
    font-family: serif !important;
  }
  body.sans-serif {
    font-family: sans-serif !important;
  }
}

See this Reference for further explanations.