Load custom font with font-face about vitesse-webext HOT 3 CLOSED

In extension's special pages(like popup and options), you can do this simply:

<style>
@font-face {
  font-family: 'Fira Code';
  src: url('/assets/FiraCode-Regular.ttf') format('truetype');
}

.font {
  font-family: 'Fira Code';
}
</style>

But in content-script, you need to specify the font assets full path:

@font-face {
  font-family: 'Fira Code';
  src: url('chrome-extension://ocihbmcjobflnakhfpiedhbiafbbdgfo/assets/FiraCode-Regular.ttf') format('truetype');
}

and make the assets are accessible via src/manifest.ts:

const manifest: Manifest.WebExtensionManifest = {
  //...
  web_accessible_resources: [
    'assets/FiraCode-Regular.ttf',
  ],
}

There are two more tips:

1. If you don't know the extension id or want to make it flexible, you can call browser.runtime.getURL('assets/FiraCode-Regular.ttf') to get the full path.
2. Just embedded the font file in CSS by base64 data URL

from vitesse-webext.

Does @font-face meet your requirements?

or Google Fonts

from vitesse-webext.

Yeah I want to use @font-face and host the fonts with my extension. I just don't know how to load them with this webext starter template.

I have put fonts in an /assets folder, but simply referencing them in the css file doesn't work, so there's probably some config to make with windi, but I can't figure out how.

from vitesse-webext.