setState causes flicker in chrome

Environment

System:

• OS: Linux 4.14 Amazon Linux 2
• CPU: (2) x64 Intel® Xeon® CPU E5-2686 v4 @ 2.30GHz
• Memory: 368.21 MB / 3.85 GB
• Container: Yes
• Shell: 4.2.46 - /bin/bash

Binaries:

• Node: 8.12.0 - /usr/local/bin/node
• npm: 6.4.1 - /usr/local/bin/npm

npmPackages:

• babel-plugin-styled-components: ^1.8.0 => 1.8.0
• styled-components: ^4.0.2 => 4.0.3

##Bug description:

When I change state of component. fonts are re-requested every time. Main.js

const App = () => (
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <Fragment>
        <Routes />
        <GlobalStyle />
        <Font />
      </Fragment>
    </ThemeProvider>
  </Provider>
);


export default App;

font.js

import { createGlobalStyle } from 'styled-components';
import Muli from './Muli/Muli-Regular.ttf';
import MuliBold from './Muli/Muli-Bold.ttf';

export default createGlobalStyle`
  @font-face {
    font-family: 'Muli';
    src: url(${Muli});
  }
  
  @font-face {
    font-family: 'MuliBold';
    src: url(${MuliBold});
  }
`;

Demo: https://drive.google.com/file/d/1LVwv1OpvHA7viQc4LafPJWv9TslT5eee/view

[jitenderchand1]

to fixed this issue for now I have moved my font import to css file.

@font-face {
  font-family: 'Muli';
  src: url('../fonts/Muli/Muli-Regular.ttf');
}

@font-face {
  font-family: 'MuliBold';
  src: url('../fonts/Muli/Muli-Bold.ttf');
}

app.js

import './styles/main.scss';

[oriSomething]

@jimthedev I had the same problem with flickering when using @font-face with createGlobalStyle