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.


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;.

  • This should be the accepted answer ^^ Simple and solve the need! – Nam G VU Oct 16 '15 at 3:51

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.

  • 1
    This answer gets my preference, the config in the profile directory is easy to version and has less chance of failing to enable when firefox does not support an extension any longer. – Ed Neville Mar 10 '19 at 20:39

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.

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.