Custom styles for websites in Firefox

 

It seems that the rendering of fonts used by some websites are so thin that they are quite illegible. There are also instances where some fonts used by websites are not so pleasant due to other reasons. This can be quickly solved using custom user style sheets which are applied locally. Though there are many extensions / plugins which can modify the appearance of a page, this method does not use any third-party application and is a simple one.

• First you need to enable a setting in Firefox. Go to about:config page and search toolkit.legacyUserProfileCustomizations.stylesheets and set it to TRUE.
• Next, go to about:support page and under Application Basics > Profile Folder, click 'Open Folder'.
• Inside the profile folder, open / create a folder named 'chrome'. 
• Inside, create a file named 'userContent.css'.
• In the file, type a line as below.

@-moz-document domain(mydomain.com) {* {font-family : Tahoma !important;} }

• Replace 'mydomain.com' with the URL of the website you need to change the font.
• Use one line for each domain for which you need to make changes.
  
• Replace 'Tahoma' with the font of your choice.
• Replace '*' with html elements like html, p, li, h1, a, etc., if you need to change only fonts of certain area. Using '*' will change all fonts of the page.
• '!important' shall be used to override the styles defined by the page.
  

Restart Firefox and see the change.