안녕하세요

styled-component @font-face 폰트 깜빡임 문제 본문

데이터시각화-KMG/Styled-Component

styled-component @font-face 폰트 깜빡임 문제

sakuraop 2023. 6. 16. 17:04 
const GlobalStyle = createGlobalStyle`


  @font-face {
    font-family: "Pretendard";
    src: local('PretendardRegular'), local('PretendardRegular'), url(${PretendardRegular}) format('woff2');
    font-weight:400;
  }

위와 같이 font-face를 적용할 경우에는 리렌더링 되는 동안 폰트가 깜빡이는 현상이 발생한다. 

styled-component를 이용할 때 리렌더링되는 컴포넌트가 style을 함께 같이 읽어 들여서 새로 적용시키기 때문이다.

 

따라서,

styled-component를 이용하지 않고 일바적으로 폰트를 적용할 때처럼 CDN으로 스타일을 적용시키면 된다.

  <head>
    <link
      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
      rel="stylesheet"
    />
    <title>카카오 돋보기 2023</title>
  </head>

https://tesseractjh.tistory.com/182

 

[styled-components] 폰트 깜빡임(FOUT) 해결하기

styled-components를 사용할 때, 리렌더링이 일어날 때 글자 폰트가 기본 폰트에서 적용된 폰트로 변경되는 과정이 그대로 보이는 경우가 있다. 이러한 현상을 FOUT(Flash Of Unstyled Font)라고 부른다. FOUT

tesseractjh.tistory.com

 

저작자표시 비영리

'데이터시각화-KMG > Styled-Component' 카테고리의 다른 글

스타일드 컴포넌트 참고 글  (0) 2023.06.21
스타일드 컴포넌트 프로퍼티에 따라 다른 css 보여주기  (0) 2023.06.19
스타일드 컴포넌트 css 프롭스 전달 방법  (0) 2023.05.11
스타일드 컴포넌트 이벤트 전달 방법  (0) 2023.05.10
스타일드 컴포넌트  (0) 2023.05.10
'데이터시각화-KMG/Styled-Component' Related Articles more