How to use San francisco fonts in iOS9


Will adding below CSS enable new iOS9 font on my ionic app? Or do I also need to install those fonts ?

  • {
    font-family: -apple-system, “Helvetica Neue”, sans-serif !important;


You don’t need to install any fonts on iOS 9.

I modified Ionic’s $font-family-sans-serif SASS variable, which does now the following:

  • San Francisco on iOS 9
  • Helvetica Neue on iOS < 9
  • Roboto on Android
  • Segoe UI on Windows Phone
$font-family-sans-serif: -apple-system-font, "Helvetica Neue", HelveticaNeue, "Roboto", "Segoe UI", sans-serif !default;

If you don’t use SASS:

body {
font-family: -apple-system-font, "Helvetica Neue", HelveticaNeue, "Roboto", "Segoe UI", sans-serif;


Just what I was looking for.


Shouldn’t this be default for Ionic?


Actually, this isn’t working. Any other ideas?