Ubuntu Firefox renders differently

Question

Firefox on Ubuntu seems to render some HTML considerably differently compared to other browsers. In particular some fonts/styles on Ubuntu are becoming much larger and colum

Answer 1

It is most likely a matter of fonts. If the browser doesn't find the font contained in the stylesheets, it will replace it with a font it sees suitable.

Unfortunately, Ubuntu doesn't come with a lot of fonts. There is a package called msttcorefonts that contains multiple Microsoft fonts. You can install it using:

sudo apt-get install msttcorefonts

However, if you users don't have the particular fonts you need, they will see the page different.

I would recommend you either don't make your design too dependent on the font. If, however, this is a necessity, consider other ways of rendering the text (like using Javascript, if the it is a title, for example).

Answer 2

Maybe it's because fonts are not dealt with the same way on Windows and on Linux ? Or maybe the fonts you are using on windows are not installed or the Ubuntu machine ?

That "problem" doesn't seem to be limited to Firefox : Googling a bit, I found posts that said the same with OpenOffice, for instance.

In jaunty there is package called ttf-mscorefonts-installer that should help about that : it installs fonts like :

• Andale Mono
• Arial Black
• Arial (Gras, Italique, Italique Gras)
• Comic Sans MS (Gras)
• Courier New (Gras, Italique, Italique Gras)
• Georgia (Gras, Italique, Italique Gras)
• Impact
• Times New Roman (Gras, Italique, Italique Gras)
• Trebuchet (Gras, Italique, Italique Gras)
• Verdana (Gras, Italique, Italique Gras)
• Webdings

(sorry, my system is in french ; "gras" means "bold" ; you probably guessed that "italique" means "italic" ^^ )

As a sidenote, this :

In particular some fonts/styles on Ubuntu are becoming much larger and columns of text which rely on equal numbers of line breaks to keep them aligned are no longer aligned on Ubuntu Firefox.

Is definitly not a good practice.

You are encountering a problem with fonts that are not installed (probably) ; but what about a user that sets his browser to :

• either zoom the fonts for a particular website
• or define a minimal font size ?

That can be done in almost any browser -- not only firefox nor Linux...

And some people do that -- I do : my eyes are not perfect (not that bad either), and I find too small fonts sometimes hard to read, so I generally set a minimal font size in Firefox ; and, yes, it destroys design on some websites :-(

And if I do that, I guess I'm not the only one : there are more and more quite old people on the Internet, that have troubles with their eyes, for example...
For instance, my grand-father recently got a computer ; I had to set his screen resolution to something like 1024x780 on his 19p LCD screen, and maximal font size in windows, so that he could read... And yeah, that makes everyone who uses his computer almost cry ^^ But it's the only way he could read...

Answer 3

A nice one.
Lucky for you the solution should be simple: Install the MS fonts on your machine...

Explained here for example

Answer 4

Firefox renders indeed fonts differently in Linux/Ubuntu, because Microsoft TrueType fonts are missing, and because default font settings are different. There are a number of steps to reduce this problem. First, as the others said, it is useful to install Microsoft TrueType fonts (Arial, Trebuchet MS) with

sudo apt-get install ttf-mscorefonts-installer

Then it is helpful to adjust the font settings in Firefox, i.e. open up Firefox, select

Edit >> Preferences >> Content >> Fonts & Colors - Advanced 

The following font settings are described here and work for me:

Fonts for: Western
Proportional: Serif, Size 16
Serif: Times New Roman
Sans-serif: Arial
Monospace: Courier New, Size 12

Answer 5

Are you using the same Version on Windows?

You can try to start FF in safe mode or create another user profile.

Answer 6

I was having the same problem rendering a text input element (using jQuery UI autocomplete) within a table cell using Firefox in Ubuntu. The table was rendering flawlessly in IE 7&8, Chrome, Safari, Firefox 3.6, but not in Firefox on Ubuntu! Arg.

I was able to set an inline style="font-size: 11px" for the text input element to fix the problem. Although it shrunk the font-size from an 12px to 11px (hardly noticeable), I was able to get a table cell that wouldn't adjust in Firefox on Ubuntu. Still renders on the above browsers!

Much thanks to Pascel MARTIN for the tips!