ElBlo
Take your fonts everywhere
I use Chrome OS, where it is not possible to install new fonts.
To workaround this limitation, I created a simple Chrome extension that allows you to add your own fonts to sites.
The idea is to have both the fonts packaged in the extension, and install them with a content script into the pages that you want.
Here’s the manifest.json
:
{
"manifest_version": 3,
"name": "Extra Fonts",
"description": "Add Extra Fonts",
"version": "1.0",
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"css" : ["fonts.css"],
"all_frames": true
}
],
"web_accessible_resources": [
{
"resources": ["fonts/*.woff2"],
"matches": ["http://*/*", "https://*/*"]
}
]
}
Then, in a fonts
folder, I just dropped all the woff2
files, and reference them from the css
that gets injected on all frames:
@font-face {
font-family: 'Hack';
src: url('chrome-extension://__MSG_@@extension_id__/fonts/hack-regular.woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Hack';
src: url('chrome-extension://__MSG_@@extension_id__/fonts/hack-bold.woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Hack';
src: url('chrome-extension://__MSG_@@extension_id__/fonts/hack-italic.woff2');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Hack';
src: url('chrome-extension://__MSG_@@extension_id__/fonts/hack-bolditalic.woff2');
font-weight: 700;
font-style: italic;
}
// Changes monospace fonts on most websites.
code { font-family: 'Hack', monospace !important; }
pre { font-family: 'Hack', monospace !important; }
// Changes gerrit monospace font.
:root {
--monospace-font-family: 'Hack', monospace !important;
}
You can add more rules to change the settings in some of the pages that you visit.
On sites like Visual Studio Code remote, or idx.google.com
, you can just set the font family to your own font in the settings.