title: Why won't 'lighter' and 'bolder' font weights work?
body: <p>I am creating an Ionic app and I want to use the custom font 'Rubik'. I have imported 'lighter' and 'bolder' font weights but they don't seem to work - wherever I add the style it just used the normal font weight. Here's the code:</p>
  
  <pre><code>@font-face {
    font-family: 'Rubik';
    src: url('#{$font-path}/Rubik-Light.otf') format('opentype');
    font-weight: lighter;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Rubik';
    src: url('#{$font-path}/Rubik-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Rubik';
    src: url('#{$font-path}/Rubik-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Rubik';
    src: url('#{$font-path}/Rubik-Black.otf') format('opentype');
    font-weight: bolder;
    font-style: normal;
  }
  </code></pre>
  
  <p>I have also tried:</p>
  
  <pre><code>@import url('https://fonts.googleapis.com/css?family=Rubik');
  </code></pre>
  
  <p>These are placed in the variables.scss file. At the moment I can only use lighter/bolder if I assign it to a new font family as normal. Lighter and bolder work fine for the default fonts installed with ionic (roboto, noto-sans). Any ideas?</p>