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?

Webfont not working in Chrome extension

I’ve been following pretty much all tutorials there are to use a webfont in your chrome extension, but none of them have worked for me, it still continues to be the same ugly font.

I have downloaded this font as zip (https://fonts.google.com/specimen/Raleway?selection.family=Raleway) and saved Raleway-Regular.ttf under assets/fonts/

I have also added the file to web_accessible_resources.

"web_accessible_resources": [
    "assets/fonts/Raleway-Regular.ttf"
]

In the style.css I have the following code in the top

@font-face {
    font-family: 'UniqueNameFont';
    font-style: normal;
    font-weight: 700;
    src: url('chrome-extension:///assets/fonts/Raleway-Regular.ttf'); 
}

* {
    font-family: 'UniqueNameFont';
    box-sizing: border-box;
}

The path to the file is correct, I’ve checked. Also, I don’t get any errors in the console log.

Now, my extension has a shadow dom, which keeps my extension inside there, I then dynamically add the style.css file and the html. Like this..

// Add stylesheet
    var link = document.createElement("link")
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = chrome.runtime.getURL('style.css');
    shadow.appendChild(link);

    // Add content to shadow
    page = page.replace(/baseuri/g, extensionOrigin);
    shadow.innerHTML += page;

All of the styling works, except for the font face

Chrome bug not rendering Google Fonts [NOT PROTOCOL ISSUE]

Switched to a free SSL WebHosting (000webhost) and now Google Fonts are not rendering, searched and tried a lot of things, the CSS code to repaint the text does not work, neither the JS, I tried linking the font URL with https: and without protocol (//), nothing happens.

It happens only in Chrome, in Opera and Firefox renders okay.

Curious fact: When I open console with F12 and press CTRL + F5, the google font render okay, but only when I open console and reload, when I enter the site normally it does not render. So crazy.

Here’s what the console throws me:

The FetchEvent for "https://fonts.gstatic.com/s/newscycle/v14/9Xe8dq6pQDsPyVH2D3tMQvk_vArhqVIZ0nv9q090hN8.woff2" resulted in a network error response: an "opaque" response was used for a request whose type is not no-cors

The FetchEvent for "same link" resulted in a network error response: an "opaque" response was used for a request whose type is not no-cors

The FetchEvent for "https://fonts.googleapis.com/css?family=News+Cycle&subset=latin,latin-ext" resulted in a network error response: an "opaque" response was used for a request whose type is not no-cors

The FetchEvent for "same link" resulted in a network error response: an "opaque" response was used for a request whose type is not no-cors
2undefined 

Failed to load resource: the server responded with a status of 404 ()

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Failed to decode downloaded font ‘fonts.css?v=0.0.3’

Using Chrome DevTools I’ve found out a little problem on my WordPress website. I’ve placed all my font-face declarations in a separated stylesheet fonts.css and in WordPress theme (Divi) settings I’ve added an additional link on this stylesheet to be inserted in head tag. And in DevTools, in console, I see a warning ‘Failed to decode downloaded font: link.to.that.fonts.stylesheet/fonts.css?v=0.0.3’ and a warning below ‘OTS parsing error: invalid version tag’. On the same stackoverflow topics such warnings were indicating on a concrete font files, for example on some .woff or .eot file, but in my case it indicates on a whole stylesheet.
I’m kindly asking someone who has thoughts on reasons causing this problem to describe these thoughts in an answer below. Thank You.