title: How can I determine which font file is being used, not just the font family?
body: <p>Let's say I have the following font face definitions:</p>
  
  <pre><code>@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/open-sans.regular.woff") format("woff");
  }
  
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans.light.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans.semibold.woff') format('woff');
  }
  
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/open-sans.bold.woff') format('woff');
  }
  </code></pre>
  
  <p>In Chrome's dev tools, I can tell which font family is being used:</p>
  
  <p><a href="https://i.stack.imgur.com/8msVD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8msVD.png" alt="enter image description here"></a></p>
  
  <p>But is there a way to tell which specific font file is being used? I'm trying to verify that the browser is actually using the bold version of the font, for example, instead of doing its own 'fake' bolding on the regular version of the font.</p>