[Issue] React styled-components Font 깜빡임

[Issue] React styled-components Font 깜빡임 (feat. GlobalStyle)

일종의 FOUC (Flash of unstyled content)

즉, style이 적용되기 전의 페이지가 보이는 이슈에 속한다고 볼 수 있습니다.

 

render 발생 시, 기본 폰트가 보인 후 설치 폰트가 적용되는 현상

 

[문제]

CSS-in-JS 라이브러리인 styled-components 환경에서 createGlobalStyle 내에 폰트를 정의하면 render가 될 때마다 폰트를 재요청하게 됩니다. 이는 styled-components의 github issue에서도 논의가 되었던 문제이며, 폰트뿐만 아니라 background-image와 같이 리소스 요청이 필요한 부분에서 동일하게 발생되는 문제입니다.

 

network에 폰트 요청이 계속 발생한다

 

해당 이슈에 대한 라이브러리 개발자의 입장을 요약하자면,
1. development 환경에서 주로 발생하는 문제이며 production 환경에서는 거의 발생하지 않는다. 

2. style 태그, cache header 등 원인이 될 수 있는 여러 후보가 있지만, 어느 것 하나도 정확하지는 않고 이 문제를 수정하려면 비합리적이고 복잡한 과정을 거쳐야한다.

3. styled-components 밖에서 리소스를 요청하는 방식으로 일단 해결할 수 있으니 해당 이슈는 closed!

4. 다양한 PR들 고마워 :)

토론에 대한 자세한 내용은 하단의 링크를 이용하세요 :)

 

[해결 방법]

unfortunately지만 best solution

[방법] GlobalStyle.js에 정의한 @font-face를 app.css 파일로 옮긴 후, app.js에서 import 해준다.

//GlobalStyle.js (해당 코드는 issue 발생)

import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'hannaPro';
    src: url(../../../public/font/BMHANNAPro.ttf);
  }
  
  @font-face {
    font-family: 'hannaAir';
    src: url(../../../public/font/BMHANNAAir.ttf);
  }
`;

export default GlobalStyle;

 

//app.css
@font-face {
  font-family: 'hannaPro';
  src: url(../public/font/BMHANNAPro.ttf);
}

@font-face {
  font-family: 'hannaAir';
  src: url(../public/font/BMHANNAAir.ttf);
}

body {
  font-family: 'hannaPro', sans-serif;
}

 

 

해-결

 

 

[issue] github.com/styled-components/styled-components/issues/1593

Dynamic style change causes custom fonts to be re-requested from the server · Issue #1593 · styled-components/styled-component