NextJS + StyledComponents : Font Flickering Issue (최초 로딩 시 폰트 깜빡임 문제 해결)

문제 : NextJS와 StyledComponents로 작업한 프로젝트에서 createGlobalStyle 이라는 StyledComponents의 함수를 사용하여 전역 폰트를 지정하였을 때 폰트 깜빡임 현상이 발생

- GlobalFonts.tsx

import { createGlobalStyle } from "styled-components";

const GlobalFonts = createGlobalStyle`
    @font-face {
        font-family: 'NotoSansKR';
        src:local('NotoSansKR'),
        url('/assets/fonts/NotoSansKR-Black.woff2') format('woff2'),
        url('/assets/fonts/NotoSansKR-Black.woff') format('woff'),
        url('/assets/fonts/NotoSansKR-Black.otf') format('opentype');
        font-weight: 900;
        font-style: normal;
    }

    @font-face {
        font-family: 'NotoSansKR';
        src:local('NotoSansKR'),
        url('/assets/fonts/NotoSansKR-Bold.woff2') format('woff2'),
        url('/assets/fonts/NotoSansKR-Bold.woff') format('woff'),
        url('/assets/fonts/NotoSansKR-Bold.otf') format('opentype');
        font-weight: 700;
        font-style: normal;
    }
`;

export default GlobalFonts;

- Root.tsx

import { ThemeProvider } from "styled-components";
import GlobalFonts from "styles/GlobalFonts";
import GlobalStyles from "styles/GlobalStyles";
import { lightTheme } from "styles/Theme";
const Root = ({ children }: any) => {
  return (
    <>
      <ThemeProvider theme={lightTheme}>
        <GlobalFonts />
        <GlobalStyles />
        {children}
      </ThemeProvider>
    </>
)}
export default Root;

위와 같은 방식으로 전역 폰트를 설정하게 되면 최초 로딩시에 폰트가 설정되는 시점에 의해서 폰트깜빡임이 발생한다.

 

해결방법 : 

 

- fonts.css

@font-face {
    font-family: 'NotoSansKR';
    src: local('NotoSansKR'),
        url('/assets/fonts/NotoSansKR-Black.woff2') format('woff2'),
        url('/assets/fonts/NotoSansKR-Black.woff') format('woff'),
        url('/assets/fonts/NotoSansKR-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansKR';
    src: local('NotoSansKR'),
        url('/assets/fonts/NotoSansKR-Bold.woff2') format('woff2'),
        url('/assets/fonts/NotoSansKR-Bold.woff') format('woff'),
        url('/assets/fonts/NotoSansKR-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

_app.tsx

import Root from "components/common/Root";
import type { AppProps } from "next/app";

import '../styles/fonts.css'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
        <Root>
          <Component {...pageProps} />
        </Root>
    </>
  );
}

export default MyApp;

위와 같은 방식으로 css파일 형식으로 font를 설정하여 주고 이를 최상단 _app.js에 import하여 사용하면 폰트깜빡임 현상이 해결된다.