ctmiller.net

(this is a repost from a previous iteration of this blog)

I was surprised that there was no easily found way to customize the font inside Reader mode in Firefox. None in the about:config, anyway. However, you CAN do it in the userContent.css file, which might not exist on your system. Yet. But we can change that.

Here’s how to find or create the userContent.css file for Firefox:

1. Locate your Firefox profile folder:

   • Open Firefox, type about:support in the address bar, and press Enter.
   • In the “Application Basics” section, find the “Profile Folder” entry and click on the “Open Folder” button next to it.

2. Create the chrome folder (if it doesn’t exist):

   • Inside the profile folder, check if there’s a' chrome' folder. If it already exists, you can proceed to the next step. If not, create a new folder and name it chrome.

3. Create the userContent.css file:

   • Inside the chrome folder, create a new text file and name it userContent.css.

4. Edit the userContent.css file:

   • Open the userContent.css file using a text editor (e.g., Notepad, Notepad++, Visual Studio Code).
   • Add your custom CSS styles to modify the appearance of web pages. For example, to change the font of web page text, you can use CSS rules like:

    .moz-reader-content {
       font-family: Hack, monospace !important;
    }

1. Save the userContent.css file:

   • Save the changes you made to the userContent.css file.

2. Restart Firefox:

   • After saving the changes, restart Firefox to apply the custom styles specified in userContent.css.

Remember that the userContent.css file only affects the appearance of web pages, not Firefox’s built-in user interface. If you style a body tag, you’ll change every font on every page you visit. However, the .moz-reader-content class should only apply to Reader mode. In theory. I’ll go test now. :)