How to debug "Missing Font" in Google Chrome (added by Chrome Extension)

Question

TL;DR: Is it possible to view the available fonts on a website (Chrome)?

I use Chrome OS, which doesn't allow you to install custom fonts on the system.

To workaround that, I created a chrome extension that adds the fonts that I want to web pages:

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"], 
      "css" : ["fonts.css"]
    }
  ],
  "web_accessible_resources": [
    {
        "resources": ["fonts/*.ttf", "fonts/*.woff2"],
        "matches": ["http://*/*", "https://*/*"]
    }
  ]

And the CSS just defines the font-face:

@font-face {
  font-family: 'Hack';
  src: url('chrome-extension://__MSG_@@extension_id__/fonts/hack-regular.woff2');
  font-weight: 400;
  font-style: normal;
}

code { font-family: 'Hack', monospace !important; }
pre { font-family: 'Hack', monospace !important; }
:root { --monospace-font-family: 'Hack'; }

The last css rules are irrelevant (I think).

In general this worked well for sites similar to vscode-remote, which let me pick the font in the settings. However, I found one internal site from my company that doesn't let me do that.

I see the computed css, which specifies my font, but apparently it is not found:

font-family: Hack, "Comic Sans MS", monospace;

I also see that the css rules get applied by an "injected stylesheet" (but I can't debug that stylesheet because it comes from an extension.

Basically, I have my font working on other website. I have my css being installed, I have my font being used, why is it not loading?.

I checked the network tab and it is not being downloaded even (as it is in other websites).

Answer 1

It turns out that you need to install the font on all frames.

The updated manifest.json:

  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"], 
      "all_frames": true,
      "css" : ["fonts.css"]
    }
  ],

A coworker hinted at the issue, and I confirmed it when I tried to use a font that was added to a parent iframe and not to the one that I wanted.

As for "How to debug" these kinds of issues, that still doesn't have a clear answer. I could not find a way to list which fonts were available for a given frame, nor to see whether the injected CSS was installed on that frame.