Posted about 1 month 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.

Situation

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. You can check this aliasing at system level with:

Copy
fc-match helvetica

Solution

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

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

Now all browsers will prefer Arial over Helvetica.

By refactoring problematic code and creating automated tests, makandra can vastly improve the maintainability of your Rails application.

Owner of this card:

Avatar
Dominik Schöler
Last edit:
about 1 month 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