Web fonts로 인한 layout 변경 문제

https://simonhearne.com/2021/layout-shifts-webfonts/

How to avoid layout shifts caused by web fonts

많은 웹사이트가 웹폰트를 쓰고 있다. 시스템 폰트 보다 본래 웹페이지 디자인에 맞는 폰트로 웹페이지를 출력하고 싶은 사람들이 많기 때문에 웹폰트 사용이 증가하고 있다. 그런데, 웹폰트는 다운로드 받아야하므로 크기가 큰 경우 웹페이지가 먼저 렌더링되는 경우가 있다. 이럴 때, 레이아웃이 출렁거리는 것을 느낄 수 있다. 웹폰트를 다 받으면 시스템 폰트로 그린 페이지를 다시 그리기 때문이다. 

위 사이트에서는 그러한 문제를 잘 설명했고, 어떻게 해결할 수 있는지 소개하고 있다..

In summary we need to prevent the layout shift by letting the browser render in a fallback system font if it doesn't get the web font in time, then optimise our fonts to try to get them to the browser before it needs them:

• use font-display: optional to prevent layout shifts
• subset fonts and serve as woff2
• use variable fonts or a limited set of weight variations
• preload critical fonts
• host your own fonts on your main domain