Summary: Can I see the list of fonts available on a website using Chrome?
As a Chrome OS user, I am unable to install custom fonts on my system.
To overcome this limitation, I developed a Chrome extension that adds the fonts I desire to web pages:
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css" : ["fonts.css"]
}
],
"web_accessible_resources": [
{
"resources": ["fonts/*.ttf", "fonts/*.woff2"],
"matches": ["http://*/*", "https://*/*"]
}
]
The CSS file simply sets the font-face property:
@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 final CSS rules might not be relevant in this context.
While this solution has been effective for websites like vscode-remote where I can choose the font from settings, I encountered an internal site within my company that does not allow this customization.
Although the computed CSS specifies my desired font, it seems to be inaccessible:
font-family: Hack, "Comic Sans MS", monospace;
I noticed that the CSS rules are being applied by an "injected stylesheet" (which I cannot debug as it originates from an extension).
In essence, my font works on other websites and my CSS is in place, so why is it not loading correctly?.
I examined the network tab and observed that the font is not being downloaded (unlike on other sites).