Tengo una extensión de Chrome con fuente personalizada, funciona correctamente, puedo ver que la fuente se descarga en la pestaña de red de devtools.

Pero cada vez que mi extensión procesa mis componentes de reacción, mi fuente personalizada se descarga una y otra vez y todo mi texto parpadea una vez para volver a procesar.

Traté de agregar una función local en la propiedad src pero nada cambió. ¿Necesito agregar una propiedad en otro lugar?

Aquí está mi código:

manifiesto.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", ], ... }

aplicación.tsx

Yo uso 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'; } `