title: ionic 4 and --ion-font-family
body: <p>I want to add a new font to ionic 4 but I have a strange problem with --ion-font-family.</p>
  
  <ul>
  <li>Steps:</li>
  <li>1: I dowloaded and set my custom font Roboto-Light in the assets/font folder</li>
  <li><p>2: I updated variables.css with code below</p>
  
  <p>@font-face {
  font-family: 'Roboto-Light';
  src: url('../assets/font/Roboto-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  }</p>
  
  <p>--ion-font-family: "Roboto" , "Helvetica-Neue", "sans-serif", "Roboto-Light" !important;</p></li>
  </ul>
  
  <p>I used google inspector to discover what ionic fonts are used by default and it was "Roboto" , "Helvetica-Neue", "sans-serif".
  Ok.
  Now the font-family use a fallback strategy.
  That is to say, it try the first, if the browser does not support, it try the next and so on.</p>
  
  <p>So now, my problem:
  If a had "Roboto-Light" at the end of --ion-font-family, it should not be taken at the primary font !
  And it is the case ...</p>
  
  <p>I really don't understand and any help will be greatly appreciated!</p>