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

Situation

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

• We build reliable cloud solutions with Infrastructure as code
• We are experts in security, Linux and databases
• We support your dev team to perform

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.