0

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';
  }
  `
Alan_
  • 35
  • 6

1 Answers1

0

Finally I decided to encode my font into base64 thank to this answer and it is not loading my font on every render anymore.

Converting and rendering web fonts to base64 - keep original look

Alan_
  • 35
  • 6