Posted 8 months ago. Visible to the public.

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.


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


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


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

fc-match helvetica


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.

makandra has been working exclusively with Ruby on Rails since 2007. Our laser focus on a single technology has made us a leader in this space.

Owner of this card:

Dominik Schöler
Last edit:
8 months ago
by Dominik Schöler
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Dominik Schöler to makandra dev
This website uses cookies to improve usability and analyze traffic.
Accept or learn more