Customizing Firefox Reader View fonts

One of the neat features of Firefox is its Reader View. The Reader View removes everything but the main content of the page, and displays it in a consistent, clean way. Firefox will display an icon in the address bar if Reader View is available for a page, allowing the user to toggle it on and off.

The reader view button, an icon of a page with text on it, at the right end of the address bar Firefox Reader View of this article. It is a sparse view of the article with a grayish background, and light, large sans serif text using generous line spacing. There is a minor mise en abyme effect with this screenshot.

Firefox Reader View button, and the Reader View that it toggles the viewport into.

Reader View has some settings, including ones for fonts. Unfortunately, these use hard-coded font stacks, which neither respect browser-level fonts settings, nor allow for easily selecting arbitrary fonts.

Previously, various sources on the Internet have suggested using Firefox's user profile customization stylesheets (like userChrome.css and userContent.css) for customizing this, but recent upstream changes have broken this approach. Fortunately, there is a simpler way.

Adding extra fonts

Extra fonts can be added by adding them to the array stored under the reader.font_type.values user preference.

To change it, enter about:config in the address bar, acknowledge the caution screen if needed, and enter reader.font_type.values in the search box at the top of the page. The default values for this preference are ["sans-serif","serif","monospace"], but any extra explicitly named fonts can also be added here. For example, we can do ["sans-serif","serif","monospace","Comic Neue"] to add Comic Neue.

Anything other than sans-serif, serif, or monospace entered here is used for the font-famiy CSS property. More specifically, it is used for a CSS variable that will be used for font-family. The value will be quoted, so we can't put a whole font stack in here.

Either way, it works:

This article in Reader View, showing Comic Neue in the selection dropdown, and also showing the article in Comic Neue.

Reader mode, with Comic Neue (and also Bitter) added to font selection (in all seriousness, using a distinctive font in a situation like this makes it easier to notice if it's being set properly).

Pocket

As an aside, the reason the Pocket icon is present in one screenshot, but absent from another here is that in my actual Firefox profile (as opposed to a separate blank one with default settings), I have Pocket disabled. You can disable Pocket with the extensions.pocket.enabled preference.