Where does Chrome “Rendered Fonts” get the name of the font from?

In the Chrome Inspector, Computed Tab, at the bottom, it shows the actual fonts that are rendered, but for the site I am working on it says:

Rendered Fonts

.—Network resource(40 glyphs)

Whereas normally, it says something like this on other sites:

Rendered Fonts

Arial—Local file(158 glyphs)

Consolas—Local file(29 glyphs)

Menlo—Local file(1 glyph)

or this:

Rendered Fonts

Nunito—Network resource(49 glyphs)

Where is it getting the “name” . for my file?

chrome extension shadow DOM import boostrap fonts

so I’d like to display bootstrap 3 icons in a shadowroot added from a chrome extension content script. So far its not working, help?

manifest.js does include the woff file in web_accessible_resources

shadow root has style tag with:

 @import url(chrome-extension://[email protected]@extension_id__/fonts/glyphicons-halflings-regular.woff2); 

What am I missing?

How can I determine which font file is being used, not just the font family?

Let’s say I have the following font face definitions:

@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');
}

In Chrome’s dev tools, I can tell which font family is being used:

enter image description here

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.