렌더링시 폰트깜빡이는현상(styled-components)

문제

처음 사이트를 들어가 npm run dev 를 쳐서 들어가니 새로 보여지는 페이지마다 폰트가 깜빡인다.
근데 또 한번 본 페이지는 깜빡이지않는다.
웹폰트를 처음 불러올때 문제같아서 GlobalStyle도 건드려보고, antdTheme도 건드려보고, theme(styled-components)도 건드려서 테마란테마는 죄다 건드려봤지만 안됬다.
그래서 구글링을 해보니 나와같은 사람발견..!ㅋㅋㅋㅋ

원인

현재나는 GlobalStyles.tsx 에 font-face와 font-family를 넣어 적용시켜놨다.
그러나 styled-components는 스타일이 render 될 때 마다 head 태그의 style 태그를 변경한다.
즉, 새로운 스타일이 등장할 때마다 폰트를 재요청하는 현상이 나타난 것!

해결

GlobalStyles.tsx 에서, 웹폰트를 불러오는 font-face를 따로 css로 빼준후 app.tsx에 import 한다.

// font.css

@font-face {
  font-family: 'ACCchildrenheartOTF-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2112-2@1.0/ACCchildrenheartOTF-Regular.woff')
    format('woff');
  font-weight: normal;
  font-style: normal;
}

// app.tsx

import '../styles/font.css';