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

Situation

Rails Long Term Support

Rails LTS provides security patches for old versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2)

• Prevents you from data breaches and liability risks
• Upgrade at your own pace
• Works with modern Rubies

Read more Show archive.org snapshot

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:

fc-match helvetica

Solution

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

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

Now all browsers will prefer Arial over Helvetica.