16

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

4
+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.

| improve this 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.

| improve this answer | |
  • 1
    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.

| improve this answer | |
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.

| improve this answer | |
  • 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

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.

| improve this answer | |
  • 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. – Elmo Allén 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.) – matt wilkie 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.