title: @font-face refer to local font for alternate styles of a font family, e.g. bold, thin etc
body: <p>I can use a local font, that falls back onto .woff2 then .woff fine. However for the bold/light alternatives, I have problems:</p>
  <h1>Regular Version</h1>
  <p>This works (will use roboto is available locally, if not will download it):</p>
  <pre><code>@font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: local('Roboto'), url('../fonts/Roboto-Light.woff2'), url('../fonts/Roboto-Light.woff');
      unicode-range: U+20-F0;
  }
  </code></pre>
  <h1>Light Version - Attemp 1: Match via font name</h1>
  <p>Although Roboto Light is also installed on my system (Windows 10), the fold is not found locally, so it is downloaded (should rather be sourced locally). Notice how the local font name is <code>'Roboto Light'</code> ( I also tried 'Roboto-Light', 'RobotoLight'):</p>
  <pre><code>@font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: local('Roboto Light'), url('../fonts/Roboto-Light.woff2'), url('../fonts/Roboto-Light.woff');
      unicode-range: U+20-F0;
  }
  </code></pre>
  <h1>Light Version - Attemp 2: Match via font-weight</h1>
  <p>Here the local file name is just <code>'Roboto'</code>, and I am relying on the font weight for the system to determine the right font. However, it just uses the regular Roboto, and the light style is not used:</p>
  <pre><code>@font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: local('Roboto'), url('../fonts/Roboto-Light.woff2'), url('../fonts/Roboto-Light.woff');
      unicode-range: U+20-F0;
  }
  </code></pre>
  <h1>Light Version - Attemp 3: Match via font-style</h1>
  <p>Same as above but trying to match on <code>font-style: light</code>. Still uses regular Roboto:</p>
  <pre><code>@font-face {
      font-family: 'Roboto';
      font-style: light;
      font-weight: 300;
      src: local('Roboto'), url('../fonts/Roboto-Light.woff2'), url('../fonts/Roboto-Light.woff');
      unicode-range: U+20-F0;
  }
  </code></pre>
  <p>How does one specify to use a local version of a font family which has a different weight?</p>
  <p>Here's a pic showing the local fonts installed:
  <a href="https://i.stack.imgur.com/GspPx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GspPx.png" alt="enter image description here" /></a></p>