[Korean FE Article] Next.js 13에서 웹 폰트 최적화
글 링크 : https://bit.ly/3vedahN
소개
웹사이트를 만들면서 한 번쯤은 웹 폰트에 대해 고민해보셨을 겁니다. 웹 폰트를 다운로드하는 속도가 느리면 텍스트가 깜빡이거나 폰트가 교체되는 과정을 눈으로 목격하실 수 있습니다. 또 폰트가 교체되는 과정에서 폰트의 크기가 서로 다르다면 레이아웃 시프트 현상도 볼 수 있습니다.
이 글은 이런 문제를 해결하기 위해서 웹 폰트 사용 시 최적화하는 방법과 Next.js 13에서 이를 손쉽게 적용하는 방법에 대해 소개합니다.
목차
최적화
HTTP 연결
Font-Face 지시어(Descriptors)
@next/font
자체 호스팅 폰트
자동 매칭 대체(Automatic Matching Fallback)
Preloading
결론