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

Situation

UI/UX Design by

We make sure that your target audience has the best possible experience with your digital product. You get:

• Design tailored to your audience
• Proven processes customized to your needs
• An expert team of experienced designers

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.