Super User is a question and answer site for computer enthusiasts and power users. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
What sort of trouble? – Karan Jan 3 '13 at 21:43
The fonts are designed for anti-aliasing; I use a CRT monitor. With AA on it looks like crap, with AA off it looks like crap. – Avery3R Jan 3 '13 at 21:44
I think the only way to do something like this might be to write custom userscripts. – Karan Jan 3 '13 at 21:46

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

share|improve this answer
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 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({ 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({ a {font-family : arial !important;font-style:italic !important;} }

Breaking those CSS lines down, they're made up of: @-moz-document domain( this is the part of the line that specifies which website you want the new rule to apply to, simply replace "" 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 bit tells CSS that this rule always overrides any more specific styling rules that it may find in the site's own stylesheet.

So your usercontent.css file would contain:

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

@-moz-document domain({ 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.

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .