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

Situation

Growing Rails Applications in Practice

Check out our e-book. Learn to structure large Ruby on Rails codebases with the tools you already know and love.

• Introduce design conventions for controllers and user-facing models
• Create a system for growth
• Build applications to last

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.