Importing fonts inside global styles cases re-importing fonts on every re-render

Environment

## System:
 - OS: macOS 10.14.1
 - CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
 - Memory: 330.83 MB / 8.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 11.0.0 - /usr/local/bin/node
 - Yarn: 1.10.1 - /usr/local/bin/yarn
 - npm: 6.4.1 - /usr/local/bin/npm
 - Watchman: 4.9.0 - /usr/local/bin/watchman
## npmPackages:
 - styled-components: ^4.1.1 => 4.1.1

Reproduction

https://github.com/SilencerWeb/eslint-config-website

Steps to reproduce

Create file .env with this line - NODE_PATH="src/", then do the following:

git clone https://github.com/SilencerWeb/eslint-config-website
git checkout 5043b2e272b6f
npm i
npm run start

Expected Behavior

On re-rendering the elements, components should update without blinking.

Actual Behavior

On re-rendering the elements, components blink.

I’m sure it is because of new global styles API that was presented in 4th version of styled-components. I had the same issue with my app on electron and react but I thought it was next.js issue, not styled-components, I had to downgrade to 3th version and use old global styles API. In the current case, I had to move all my fonts to public folder - https://github.com/SilencerWeb/eslint-config-website/commit/7cd1722a816669b1a6d2642475cb11e4c7a77721. Please, check in Chrome, Opera or Safari - in these browser this bug exists for sure.

[probablyup]

Long story short, make sure your fonts are served with appropriate HTTP caching headers. If there is no caching header set, the browser will re-request them every time the style tag is touched.

[danbopes]

It’s absolutely a styled-components issue. The style tag is being rerendered again which is why another attempt to grab the fonts is made. Caching or not, it’s still an issue. Just because the base64 decodes offered a workaround to this problem, doesn’t mean that it’s not a styled components issue. I’ll have a look, and see if I can tackle the reason why this is happening.