I have a chrome extension with custom font, it works properly, I can see that the font is downloaded in devtools network tab.

But every time my extension renders my react components, my custom font gets downloaded again and again and all my text blink once to rerender.

I tried to add a local function in src property but nothing change. Do I need to add a property somewhere else ?

Here is my code :

manifest.json

{
  ...
  "content_scripts": [
    {
      "matches": ["*://*.instagram.com/*"],
      "js": ["content_script.js"],
      "run_at": "document_start",
      "web_accessible_resources": [ "assets/ClashGrotesk-Variable.ttf" ]
    }
  ],
  "web_accessible_resources": [
    "assets/inject.js",
    "assets/ClashGrotesk-Variable.ttf",
  ],
  ...
}

app.tsx

I use styled-components

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'ClashGrotesk-Variable';
    src: local('ClashGrotesk-Variable'), url('chrome-extension://__MSG_@@extension_id__/assets/ClashGrotesk-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
  }

  html body {
    font-family: 'ClashGrotesk-Variable';
  }
  `