Replace fonts in firefox on only certain websites, and only certain fonts

Question

Is there a way to replace the fonts of a website, but only on certain websites? I'm aware of the option under content, but that applies to all websites, and only certain websites are giving me trouble, and sometimes it's only certain fonts giving me the trouble too.

Answer 1

Depending on the number of pages, Stylish may be an option. You make a simple css file, where you re-define the fonts.

Afterwards you select urls the style should be applied to.

No great css knowledge is necessary, you can stick with font-family: whatever;.

Answer 2

You can create a User Style Sheet to do this. User style sheets allow you to override a site's CSS styles and replace them with your own.

First you need to find your Firefox's profile folder and create the CSS file, do this by:

• Click the Firefox menu (in the top-left corner of the Firefox window)
• Select Help -> Troubleshooting Information
• In the Application Basics section click the Show Folder or Edit Folder button on the Profile Folder line.
• In the folder that's opened either go into the chrome folder, or (if it doesn't exist) create a new folder named chrome.
• Create a new text file called userContent.css

Now open that new file in a text editor (like Windows Notepad).

You can now use CSS to override styles for certain web sites, for instance to change all of the main fonts on this website to use a Serif style use:

@-moz-document domain(superuser.com){ html, p, li, h1 {font-family : serif !important;} }

Or to change all of the links on StackOverflow so that they're in an italic, Arial font:

@-moz-document domain(stackoverflow.com){ a {font-family : arial !important;font-style:italic !important;} }

Breaking those CSS lines down, they're made up of: @-moz-document domain(superuser.com) this is the part of the line that specifies which website you want the new rule to apply to, simply replace "superuser.com" with the website that you want to change. html, p, li, h1 is a list of the HTML elements that you want to restyle in that page. font-family : serif !important; is the new CSS styling rule that you want to apply to the HTML, the !important directive causes the CSS in this file to override the CSS in the site's own stylesheet.

So your usercontent.css file would contain:

@-moz-document domain(superuser.com){ html, p, li, h1 {font-family : serif !important;} }

@-moz-document domain(stackoverflow.com){ a {font-family : arial !important;font-style:italic !important;} }

Now save that file and restart Firefox and you should see that the text is now styled the way that you want it.

Answer 3

https://superuser.com/a/532623/460302 above is the best answer I've found in StackExchange, but I would like to add detail regarding classes in stylesheets (derived from https://ffeathers.wordpress.com/2013/03/10/how-to-override-css-stylesheets-in-firefox):

In addition to the single-line syntax above, you may include in userContent.css a multi-line entry like the following:

@-moz-document domain(jsbin.com){ 

#bin .editbox .CodeMirror pre,
.mobile .editbox textarea {
  font-family: Menlo, Monaco, consolas, monospace !important;
}
}

This is actually a modified section of one of jsbin's style sheets (from jsbin v4.1.0 style.css) which disables jsbin's use of the "Source Code Pro" font.