bot101
commented
8 months ago Found a workaround. Solved my problem, but I don't believe it's the best case solution.
What I did:
Install Styled Components via npm install styled-components
Create a global style component like so:
const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap'); /* Add any additional global styles here */ `;
Add it to your base component:
<GlobalStyle />
What happened?
I am working on a project that injects a custom overlay UI that has it's own injected font. Font injection works fine on most of it's target websites, but there's one that has a content security policy that prevents loading data: urls, and this is blocking the font injection on that website. I know fonts can be imported via url in regular browser extensions so i know a workaround/solution is possible. I'd be grateful if someone who has encountered a similar issue can describe how it was worked around.
Thanks.
Version
Latest
What OS are you seeing the problem on?
Windows, MacOSX, Linux
What browsers are you seeing the problem on?
Chrome, Microsoft Edge, Firefox
Relevant log output
No response
(OPTIONAL) Contribution
Code of Conduct