19

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

enter image description here

0
5
+50

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.

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.

1
  • 4
    Please note that userChrome.css and userContent.css are disabled by default in firefox version 69 and newer. If this guide doesn't work for you, make sure that userContent is enabeld by going to about:config and search for toolkit.legacyUserProfileCustomizations.stylesheets and set it to true then restart your browser. ghacks.net/2019/05/24/…
    – Ramast
    Nov 26 '19 at 12:51
3

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.

2

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.

4
  • 1
    thank you , but I know reader view what to do, I don't know how to change font reader view... I don't want install new add-on, I want change fonts of reader view.
    – Sinac
    Sep 21 '15 at 9:33
  • Sorry mate, but I don't think it's possible without addon.
    – Josip Ivic
    Sep 21 '15 at 9:38
  • ok, I agree with you, but I don't want install add-on for this job
    – Sinac
    Sep 21 '15 at 9:42
  • Just try it, maybe it'll work out for you. You can uninstall it afterwards.
    – Josip Ivic
    Sep 21 '15 at 9:43
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;
        }
    }
  1. Restart FireFox to apply the style.

Here is some reference for customizing the fonts with CSS.

1
  • Worked for me on Firefox 94.0.2, but since you need to set toolkit.legacyUserProfileCustomizations.stylesheets = true it will probably be removed in future
    – Leeroy
    Nov 25 at 13:19
0

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 Preferences view

Screenshot of the changed Firefox reader font:

Screenshot of the changed Firefox reader font

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

2
  • 2
    At least in Firefox 47 those settings do not affect Reader View in any way. They only affect what the browser selects as the font when the CSS font-family evaluates to those four values. Jul 9 '16 at 14:50
  • 1
    @ElmoAllén the preference settings will affect Reader View if "Allow pages to choose their own fonts..." is not checked. (Which still may not desirable since it affects all pages, not just reader view. It does provide an option which might work for some though.) Nov 15 '16 at 17:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.