Started off with the following font-family for the web application that I’m building

 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

Helvetica Neue is a smart font popularized by iOS. But it got rendered as follows on various browsers:

  • Chrome/Windows 8.1 - Helvetica
  • Firefox/Windows 8.1 - Arial
  • IE/Windows 8.1 - Arial
  • Safari / iOS7.1 - Helvetica Neue

So what is wrong; nothing actually. The default font selection mechanism of the browser kicked in and the available font with the browser got rendered. Why it is bad - the page looks different on different devices/browsers. Helvetica Neue is not a web safe font; the font is available by default only on iOS. Installing certain Adobe products might bring it to Windows as well, but in general it is not present on Windows or Linux.

But we could always font-face (font is dynamically served) the font we want and that is when I figured out the Helvetica Neue is not a free one.

In the end I ended up using a combination of Open Sans and Droid Serif served by Google Fonts Api.

Different browsers need font data in different format eot, woff, tiff and the font api is intelligent enough to serve it appropriately. The downside the additional network round trips to generate the css fragment. Optimizing that is probably in another post...