Isolated styled-components with @font-face : <p>I'm using <a href="https://github.com/styled-components/styled-components" rel="noreferrer">https://github.com/styled-components/styled-components</a>. </p>

<p>I'm trying to work out the best strategy for components that require <code>@font-face</code>. I want to make sure each component is independent of its context, so I'm defining <code>font-family</code> styles on each them. But if I use <code>injectGlobal</code> in multiple components, I get multiple <code>@font-face</code> rules for the same font.</p>

<p>Should I just define the <code>@font-face</code> rules in my <code>ThemeProvider</code> entry-point component and live with the fact that the desired font might not be loaded by the browser?</p>
