How to change font in Firefox Reader View?

Question

Firefox Reader View has two fonts, serif and sans-serif. I want to change these fonts. How can I do that?

Answer 1

I wanted to change the background colour to pure black and the font colour to pure white for the "Dark" theme of the Reader. The answer that uses userContent.css from 2016 seems to be outdated, and did not work on FireFox 89. After searching the web and countless testing, here is the solution I have found.

1. Enable userstyles from about:config by setting toolkit.legacyUserProfileCustomizations.stylesheets to true

2. Find your profile folder in about:support, look in the table for Profile folder and click the Open Folder button.

3. In your profile folder's root create the subfolder /chrome and a file named userContent.css. _{Example on Windows: C:\Users\[your Windows ID]\AppData\Roaming\Mozilla\Firefox\Profiles\[random ID]\chrome\userContent.css}

4. The CSS for changing the colours of the Dark theme was:

    @-moz-document url-prefix("about:reader")
    {
        body.dark
        {
                color: #FFFFFF !important;
                background-color: #000000 !important;
        }
    }

5. Restart FireFox to apply the style.

Here is some reference for customizing the fonts with CSS.

Answer 2

2019 answer:

If the Firefox Reader View can no longer be customized, you could use the alternative add-on Readability based Reader View, in order to "declutter webpages for better reading experience".

More information is to be found in its home page, from which I quote this text:

Q: Can I change the background color on the "Reader View" mode?

A: Yes, on the left side of the page, you will see a button with "Aa" label. Press this button once to open the UI control panel. You can change the font-family, font-size, line-height and the color of the page right from this panel. It is also possible to further customize each of the three provided modes by inserting your own user-defined custom styles. Use the options page to insert the CSS code.

In the settings for the extension, find "Custom styling (reader view)", custom CSS rules can be added here to override what font(s) are used when selecting serif/sans-serif in the GUI. Example:

body[data-font=serif] {
  font-family: 'My Serif Font', serif !important;
}

body[data-font=sans-serif] {
  font-family: 'My Sans-Serif Font', sans-serif !important;
}

You can also create rules that only apply for different background color settings, as per the documentation:

body[data-mode=sepia] {
  color: green !important;
}
body[data-mode=light] {
  color: blue !important;
}
body[data-mode=dark] {
  color: red !important;
}

Answer 3

There's a detailed description to do this by adding a userContent.css in your user profile at How to Customize Firefox Reader View for Better Readability (Hongkiat blog). Also see this Reddit thread, I want to edit chrome://global/skin/aboutReader.css How do I do it?

...\Profiles\<your-profile-folder>\chrome\userContent.css

There is also How can I add the CSS styles used by Firefox reader mode? on the Mozilla support forum which says to modify #moz-reader-content in:

chrome://global/skin/aboutReaderControls.css
chrome://global/skin/aboutReaderContent.css 

...but is silent on how to do that.

Answer 4

Here's a way to do it based on matt wilkie's answer, for Linux systems (it should be similar for Windows and MacOS*):

$ cd ~/.mozilla/firefox/*.default
$ mkdir -p chrome && cd chrome
$ echo 'body.serif { font-family: "URW Palladio L" !important; }' >> userContent.css

(I used the "URW Palladio L" font for demonstration, as it's the closest font commonly available on Linux systems to Book Antiqua / Palatino, which are my go-to choices for serif text.)

The !important is required because the userContent.css stylesheet is loaded before the reader ones.

_{* To find the profile folder, navigate to about:support (or use the menu Help > Troubleshooting Information) and click the "Open Directory" button next to the "Profile Directory" entry.}

Answer 5

If a page is available in Reader View, Reader mode will appear in the address bar. Options will appear to the left when you view a page in Reader View, and you have the Aa icon, click on it, and there you can change the font.

+

Install Reader 40.0 addon if you can't edit the font. With that addon, you can change it too.

Answer 6

I wondered why I didn't face this problem.

Turns out it's because I enforce my font preferences on all websites by unchecking the box in font preferences that says "Allow pages to choose their own fonts, instead of your selections above". Turns out this enforces this rule in the reader mode as well (which is good for accessibility).

This is not exactly what the original question is for, but I thought I'll leave this in case it's useful.

Answer 7

These fonts are tied to your firefox font preferences. You can change them by going to Preferences > Content > Advanced and choosing your fonts for serif and sans-serif styles.

Screenshot of the Preferences view:

Screenshot of the changed Firefox reader font:

As you can see in the images above, I have changed the serif font to Seravek.

Answer 8

2022 (in Firefox 100):

1. In the URL bar, enter: about:config . Click on Accept Risks and continue button
2. In the search field, type reader This lists out all the parameters that can be configured including font type, content width, background color etc.

Once you choose the font type, you can edit the font by:

1. In the browser url bar, type about:preferences
2. scroll down the page until you see the Fonts section. Click on advanced and choose the required font.

Reference: https://www.trishtech.com/2022/04/how-to-change-fonts-in-mozilla-firefox-reader-mode/