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

Question

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?

Answer 1

Fonts have MetaData, it seems the creator of the font you are using did not properly fill it.

You can try this website to check the metadata of your font to see if the name part has a . in it:

https://opentype.js.org/font-inspector.html

Answer 2

Actually this is the expected behavior of the Webfonts format. In these fonts, font creators remove a number of OpenType tables that have no use in the web environment, including the 'name' table which is where the dot comes from, this allows us to keep the file size to a minimum, and enhance the fonts performance on the web browsers, for instance.

Because of the lack of the 'name' table, Webfonts are not installable on desktop machines, this is also so that the user does not misuse it in a desktop environment, which they are not intended for. Also, fonts can be downloaded from a website and then be used illegally by other companies, by preventing the Webfonts to be installable on desktop computers, we minimize font hacking.

In this case, I'd suggest using the Desktop fonts, as these files will have the complete information of the 'name' table.