Flickering of screen when loading font files inside createGlobalStyles

[rahul3103]

Environment

`## System:

• OS: macOS 10.15.1
• CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
• Memory: 42.50 MB / 16.00 GB
• Shell: 5.7.1 - /bin/zsh

Binaries:

• Node: 13.2.0 - ~/.nvm/versions/node/v13.2.0/bin/node
• Yarn: 1.19.2 - /usr/local/bin/yarn
• npm: 6.13.1 - ~/.nvm/versions/node/v13.2.0/bin/npm

npmPackages:

• babel-plugin-styled-components: ^1.10.6 => 1.10.6
• styled-components: ^5.0.0-rc.2 => 5.0.0-rc.2`
• @material-ui/core": "^4.7.0",

Reproduction

I have provided the video link where I have used 1 component with transition and other without it. Where i haven't used transition its working correctly but where I am using transition the whole screen flickers.

Steps to reproduce

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: "MyFont";
    src: url("static/fonts/Std-Regular.otf");
  }
  @font-face {
    font-family: "MyFont";
    font-weight: bold;
    src: url("static/fonts/Std-Bold.otf");
  }
  @font-face {
    font-family: "MyFont";
    font-weight: 600;
    src: url("static/fonts/Std-SemiBold.otf");
  }
  
`;

export default GlobalStyle;

Expected Behavior

No flickering on first time pop up

Actual Behavior

https://youtu.be/oah3JzZDOl0

[quantizor]

Sorry but this isn't enough information to be able to help. You'll need to provide a codesandbox reproduction for us to be able to diagnose what's going on...

[rahul3103]

Hey, I got the problem this was happening because I was trying to load fonts in GlobalStyle and once I commented them the flickers stopped.

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
body {
  @font-face {
    font-family: "My-Font";
    src: url("/static/fonts/Font-Regular.otf");
  }
  @font-face {
    font-family: "My-Font";
    font-weight: bold;
    src: url("/static/fonts/Font-Bold.otf");
  }
  @font-face {
    font-family: "My-Font";
    font-weight: 600;
    src: url("/static/fonts/Font-SemiBold.otf");
  }
  font-family: My-Font, -apple-system, BlinkMacSystemFont, sans-serif;
 
`;

Can you explain me why its happening and how should I load fonts
https://github.com/rahul3103/flicker
Here I have added the project

[kitten]

Optimally you’ll want to put them in a global CSS file, and at the minimum you’ll want to send the correct cache header for them, which will stop the flicker but will still causes Chrome to send a request in development.

I’d really recommend you to avoid createGlobalStyles if it’s static CSS and contains fonts and go for a single global CSS file that resets some CSS and includes your fonts 🙂

[rahul3103]

@kitten @probablyup i am using next.js. So, I thought of not using any CSS files. But, do you think if it's the best way. Then I will do the same. But, then what we gonna use createGlobalStyles for?

[quantizor]

createGlobalStyles is useful for global CSS that still needs to consume theme variables provided via ThemeProvider. If your CSS is truly static though I agree with @kitten and it's probably better to just put it in your _document.js file.

[emptycrown]

Hey guys, I have a use case here where I'm importing fonts in the same way, except the paths are not static (they're obtained through our Electron app). Therefore, it's not possible to import them in a static CSS file. Is there any clean way to import the fonts via dynamic paths?

createGlobalStyles works but we run into this flicker problem.

[douglasrcjames]

Hi, I'd like to bump my use case getting a flickering issue as well; I was hoping to load the user's choice for a local font file from the theme props, but since there is this flickering issue, it's not worth the trade off to sacrifice a constant flickering to user choosing local font. I would love if there was a better work around to this than to just do my @font-face declarations in the App.css file where I cannot load dynamic theme props!