Using Google fonts in chrome extension manifest v3

Ronak Bhandari

unread,

Jan 28, 2024, 11:30:46 PM1/28/24

to Chromium Extensions

Hi.

I would like to know if I have missed any step in using the Google font with different font weights.

In manifest.json file I have added

  "web_accessible_resources": [
    {
      "resources": ["/fonts/*.ttf"],
      "matches": ["<all_urls>"]
    }
  ]

In my scss file, I have added

@font-face {
  font-family: 'InterRegular';
  // font-style: normal;
  font-weight: 400;
  src: url('/fonts/Inter-Regular.ttf') format('ttf');
}

@font-face {
  font-family: 'InterMedium';
  // font-style: normal;
  font-weight: 500;
  src: url('/fonts/Inter-Medium.ttf') format('ttf');
}

@mixin fontSmall_400 {
  font-family: 'InterRegular', -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px;
}

@mixin fontSmall_500 {
  font-family: 'InterMedium', -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
}

When using these mixins in my classes, the font names are getting assigned but there is effect on the DOM of the font family and font weight. Am I missing on any step or done something incorrect?

--

Regards,
Ronak Bhandari

wOxxOm

unread,

Jan 29, 2024, 1:28:20 AM1/29/24

to Chromium Extensions, Ronak Bhandari

The URL should start with the chrome-extension://id prefix, see https://stackoverflow.com/questions/4535816/how-to-use-font-face-on-a-chrome-extension-in-a-content-script

Ronak Bhandari

unread,

Jan 30, 2024, 1:54:22 AM1/30/24

to Akatu Owunebe, wOxxOm, Chromium Extensions

Hi Akatu. I tried the solution of changing the 'ttf' to 'truetype' in the format function. This also didn't work.

1. Do I have to set the path of the font in src as absolute path like chrome-extension://<extension-id>/fonts/Inter-Regular.ttf

2. Do I have to inject the style in the content script using JS? (https://stackoverflow.com/questions/4535816/how-to-use-font-face-on-a-chrome-extension-in-a-content-script)

On Tue, Jan 30, 2024 at 2:42 AM Ronak Bhandari <rona...@gmail.com> wrote:

Thank you for the clarification. I will try this out.

On Mon, 29 Jan 2024 at 10:07 PM, Akatu Owunebe <owunebe...@gmail.com> wrote:
Your manifest.json file looks fine for making the fonts accessible. However, in your SCSS code, the `format` in `src` attribute of `@font-face` should be set to 'truetype' instead of 'ttf'. Also, make sure the paths to your font files are correct.

Here's the corrected code:

```scss
@font-face {
font-family: 'InterRegular';
font-weight: 400;
src: url('/fonts/Inter-Regular.ttf') format('truetype');
}

@font-face {
font-family: 'InterMedium';
font-weight: 500;
src: url('/fonts/Inter-Medium.ttf') format('truetype');
}

@mixin fontSmall_400 {
font-family: 'InterRegular', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 14px;
}

@mixin fontSmall_500 {

font-family: 'InterMedium', -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 14px;
}

```

Ensure that your font files are located at the correct path, and try reloading your application. If the issue persists, check the browser console for any error messages related to font loading.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/CAHkk8Jz8Upmo%3Dy%3DhM-n%3DZ87HTB3RC6vFRaURJ%2BJazPVf4Cij9A%40mail.gmail.com.

--

Regards,
Ronak Bhandari

Ronak Bhandari

unread,

Jan 30, 2024, 2:24:40 AM1/30/24

to Akatu Owunebe, wOxxOm, Chromium Extensions

In continuation to my previous email, can I directly import from external URL and use the font-family as "Inter"?

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');