웹폰트 로드가 느린 경우, 해결 방법 (font-display CSS)

🚨 문제 상황

문제상황

  @font-face {
    font-family: "AppleSDGothicNeo";
    font-weight: 100;
    src: url("/moa/fonts/AppleSDGothicNeo/AppleSDGothicNeoT.woff2") format("woff2");
    font-display: swap;
    unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+0020;
  }

 

@font-face로 로드한 폰트가 늦게 적용되는지 깜박이는 이슈 발견.

글자가 깜빡이는 오류

 

 

 ✅ 해결 방법

font-display CSS 기능을 활용하면 웹폰트를 로드하는 동안 사용자가 텍스트를 볼 수 있습니다.

 

보이지 않는 텍스트가 표시되지 않도록 하는 방법 

 

font-display API는 font-face 스타일 내에서 사용될 때 글꼴이 표시되는 방식을 나타냅니다. 

다음 font-display 값은 맞춤 글꼴이 준비되지 않은 경우 브라우저에 시스템 글꼴을 사용하라고 지시합다.

- swap

- optional

- fallback

 

CSS 예

  @font-face {
    font-family: "Pacifico";
    font-style: normal;
    font-weight: 400;
    src: local("Pacifico Regular"), local("Pacifico-Regular"), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format("woff2");
    ✅ font-display: swap;
  }

 

 

 

상세 참고

https://developer.chrome.com/docs/lighthouse/performance/font-display?utm_source=lighthouse&utm_medium=lr&hl=ko