ElBlo

Take your fonts everywhere

August 11, 2023

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.