Load custom font with font-face

[ruihildt]

I've been trying to add custom font, but I don't understand were I should start.

Does someone have any pointers?

[tmkx]

Does @font-face meet your requirements?

or Google Fonts

[ruihildt]

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.

[tmkx]

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

[namsir]

Hello, I'm trying to add vuetify to this and having trouble with loading the fonts in con-script. I've tried 👍

`const googleFont = document.createElement('link') googleFont.setAttribute('rel', 'stylesheet') googleFont.setAttribute('href', 'https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css')

shadowDOM.appendChild(googleFont)`

I've also tried: `web_accessible_resources: [ { resources: [ 'assets/MaterialIcons-Regular.eot', 'assets/MaterialIcons-Regular.ttf', 'assets/MaterialIcons-Regular.woff', 'assets/MaterialIcons-Regular.woff2', 'dist/contentScripts/style.css',

    ],
    matches: ['<all_urls>'],
  },
],`

`@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; font-display: block; src: url("chrome-extension://oeoggkcblclnkpkamdjppfaefbaagaem/assets/MaterialIcons-Regular.eot"); src: local("☺"), url("chrome-extension://oeoggkcblclnkpkamdjppfaefbaagaem/assets/MaterialIcons-Regular.woff2") format("woff2"), url("chrome-extension://oeoggkcblclnkpkamdjppfaefbaagaem/assets/MaterialIcons-Regular.woff") format("woff"), url("chrome-extension://oeoggkcblclnkpkamdjppfaefbaagaem/assets/MaterialIcons-Regular.ttf") format("truetype");

}`

Can anyone give me some pointers?

[tmkx]

@namsir could u provide a minimum reproduction repo?

[patrikb42222]

Hey, I can't seem to get the font working in the content script despite following the steps you mentioned, I put a minimal reproduction fork below.

https://github.com/patrikb42222/vitesse-webext