Changing Fonts in Firefox

I recently encountered a problem with some of the fonts that Firefox was using to display website contents.

I changed default system fonts in Windows XP to Windows Vista fonts and since then encountered an almost unreadable font in forms on almost any website I opened in the browser.

It turned out that Firefox was using one of the new Vista fonts to display the text in form fields which was totally out of place so to speak.

The chars were so close to each other that I was barely able to make them out and an increase in font size did not have a positive effect on the display either.

I knew that there was a setting somewhere in Firefox that would let me pick fonts.

You can access it in the Firefox options (Click on the Alt-key, select Tools > Options).

A click on the Content tab reveals a section entitled Fonts & Colors and a click on the Advanced button in that section leads to a new windows where fonts for specific elements on websites can be selected.

The problem that I encountered was caused by the selected Monospace font. I changed the default font to Cambria and the forms displayed in the browser turned back to a readable normal state.

I'm probably not the only one encountering this behavior and I thought it would be great to have it on paper so that everyone can look it up in case they do not know how to edit the fonts in Firefox.

It needs to be noted that the fonts listing lists the default fonts used by the Firefox web browser if the website does not specify different fonts.

You can override that too by removing the "allow pages to choose their own fonts, instead of my selections above" preference on the same page.

Firefox's Developer Tools are quite handy in this regard as well. You can use them to find out whether the font issue is caused by a font set by the website or Firefox's default set of fonts.

Just hit F12 to open the Developer Tools while you are on the page where fonts are not displayed correctly on. Switch to Inspector and there to Fonts to see the list of fonts used on the page.

You can click on the small selection icon next to Inspector to pick an element on the page to check it out in detail.

Advertisement