How to get system font

system-font.css

/*
  We want to get system font. It would be annoying to specify all
  of those cascades every time when we need to change type.
  So, here is the short hand.
*/

@font-face {
  font-family: 'AppFont';
  font-style: normal;
  font-weight: 400;
  src:
    /*
      Try to match Android System font,
      although neither Chrome nor Anroid Webkit uses keyword "Roboto"
      Firefox on Android matches it here
    */
    local('Roboto'),
    local('Roboto-Regular'),
    /*
      Okay, next choose an iOS font..
    */
    local('Helvetica Neue'),
    local('HelveticaNeue-Regular'),
    /*
      Next matches Android system font (on Chrome/Webkit).
      This is required for Android WebKit, otherwise it will render
      all 'AppFont' fonts as 'light' font.
    */
    local('sans-serif');
}

@font-face {
  font-family: 'AppFont';
  font-style: normal;
  font-weight: 500;
  src:
    /* Nothing interesting right here ... */
    local('Roboto Medium'),
    local('Roboto-Medium'),
    local('Helvetica Neue Medium'),
    local('HelveticaNeue-Medium'),
    /*
      ... but this is interesting. 
      To match Android system font (Roboto) we need to use
      some variat of the "sans-serif" keyword.
      This will be matched by Chrome/Android WebKit.
      Although "medium" is specified, it's only support from Android 5+
    */
    local('sans-serif-medium');
}

@font-face {
  font-family: 'AppFont';
  font-style: normal;
  font-weight: 700;
  src:
    local('Roboto Bold'),
    local('Roboto-Bold'),
    local('Helvetica Neue Bold'),
    local('HelveticaNeue-Bold'),
    local('sans-serif-bold');
}

@font-face {
  font-family: 'AppFont';
  font-style: normal;
  font-weight: 300;
  src:
    local('Roboto Light'),
    local('Roboto-Light'),
    local('Helvetica Neue Light'),
    local('HelveticaNeue-Light'),
    local('sans-serif-light');
}

/* Use it here. Now it looks nicer ... if we forget about all that mess above */
.font-medium {
  font-family: 'AppFont', sans-serif;
  font-weight: 500;
}