next.js

Next.js 13에서 웹 폰트 최적화

원문 : https://www.lydiahallie.io/blog/optimizing-webfonts-in-nextjs-13 웹 폰트는 현대 웹 디자인의 필수 요소입니다. 웹상에서 아름다운 타이포그래피를 가능하게 하며 여러분의 제품에 유니크함을 더해줍니다. ✨ 그러나 웹 폰트를 사용하면 문제가 생길 수도 있습니다. 여러분이 인터넷을 자주 사용하신다면 다음과 같은 현상을 경험했을 가능성이 있습니다. 웹 폰트가 다운로드되어 설치될 때까지는 Times New Roman 및 Arial 등의 기본 폰트를 처음 표시하는 웹 사이트로 이동합니다. 그 다음 폰트를 기본값에서 웹 폰트로 빠르게 전환해서 종종 레이아웃 시프트(layout shift)를 일으킵니다. 레이아웃 시프트는 몇 픽셀 이동부터 큰 폰트나 다른 줄 바..