Linux, Arial and Helvetica: Different font rendering in Firefox and Chrome

When text renders differently in Firefox and Chrome, it may be caused by a font alias that both browsers handle differently.

Situation

A machine running Linux, and a website with the Bootstrap 3 default font-family: "Helvetica Neue", Helvetica, Arial, sans-serif.

Issue

Anti-aliasing and kerning of text looks bad in Firefox. Worse, it is rendered 1px lower than in Chrome (shifted down).

Reason

Firefox resolves "Helvetica" to an installed "TeX Gyre Heros", which is its Ghostscript clone Show archive.org snapshot . You can check this aliasing at system level with:

Copyfc-match helvetica

Solution

You can override the font aliasing in your stylesheet with this font (re-)definition:

Copy@​font-face {
  font-family: Helvetica;
  src: local(Arial), local(Helvetica);
}

Now all browsers will prefer Arial over Helvetica.