16

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!

Muhammad Ahmed
  • 428
  • 2
  • 6
  • 17
  • 1
    Ain't the whole point with reader view that the content is rendered without the developers interference ? There is a css-file `aboutReader.css` included. More suitable would be to ask a question on the project it self => https://github.com/mozilla/readability – anderssonola Aug 27 '18 at 06:51

2 Answers2

15

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.

mach
  • 175
  • 6
PatrickSteiner
  • 495
  • 4
  • 26
  • 1
    What if I'm on Windows? – Meraj al Maksud Dec 07 '19 at 15:54
  • 7
    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](https://www.ghacks.net/2019/05/24/firefox-69-userchrome-css-and-usercontent-css-disabled-by-default/). – mach Jan 10 '20 at 10:17
  • 1
    @mach: This doesn't seem to work anymore: _userContent.css_ is ignored. Too bad, since the default typewriter fonts are unreadable on certain screens. – Gruber Sep 02 '21 at 13:39
  • 1
    This seems like a lot just to change the font. Why is Mozilla so scared to allow users customizing their reader experience? – Sukima Dec 16 '22 at 21:54
  • 1
    @MerajalMaksud I would presume `%APPDATA%/Mozilla/Firefox/Profiles//chrome/userContent.css` – Pharap Feb 01 '23 at 05:38
0

You don't need to add or change .css, follow these steps:

  1. In address bar, type about:config, then click the button to accept the risk.

  2. In the search box, type or paste the new preference name: pdfjs.viewerCssTheme

  3. Double-click to edit and set the value to 2 for a dark theme, then click the blue checkmark button to save the change. (0 = default, 1 = light).

Jopie
  • 336
  • 3
  • 9