I love Firefox Reader View. But not its fonts. More specifically, these are not the best choices:

body.serif, body.serif .remove-button {
    font-family: Georgia, "Times New Roman", serif;

body.sans-serif, body.sans-serif .remove-button {
    font-family: Helvetica, Arial, sans-serif;

I'd rather have this:

body.serif, body.serif .remove-button {
    font-family: "Cambria", serif;

body.sans-serif, body.sans-serif .remove-button {
    font-family: "Open Sans", "Segoe UI", "Tahoma", "Calibri", sans-serif;

Now, I can apply these changes manually every time I open the Reader View via the developers tools. But is there a way to automate this?

I tried Stylish, but either I could code it correctly or Stylish wasn't up to the task.

  • 1
    WebExtensions can't modify about:* URLs which explains why Stylish doesn't work in this case. – dsstorefile1 Apr 17 '18 at 12:53

In case you haven't gotten around to hunting this down yet, and/or for posterity, as of FF v60 the solution is to:

  • locate your profile folder (listed in about:support)
  • in there, create a folder called "chrome" if it doesn't already exist
  • in that folder, create a file called "userContent.css"

Then you'll need the correct CSS at-rule and you're good to go:

@-moz-document url-prefix("about:reader") {
    body.serif {
        font-family: 'Besley*' !important;

N.B. you can also style the sidebar and its buttons, helpful to reduce contrast for dark themes:

.toolbar {
    background-color: #333 !important;
    border-right: 1px solid #444 !important;
.button {
    color: #ccc !important;
    background-color: #444 !important;
  • Thanks a lot! The "!important" keyword did the trick. I had tried this before but with the "!important" keyword. – user477799 May 17 '18 at 13:44

Your Answer

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