Web fonts로 인한 layout 변경 문제
Web2023. 3. 18. 04:01
https://simonhearne.com/2021/layout-shifts-webfonts/
How to avoid layout shifts caused by web fonts
One of the biggest causes of layout shifts for my clients is late-loading web fonts, let's look at how to optimise them!
simonhearne.com
많은 웹사이트가 웹폰트를 쓰고 있다. 시스템 폰트 보다 본래 웹페이지 디자인에 맞는 폰트로 웹페이지를 출력하고 싶은 사람들이 많기 때문에 웹폰트 사용이 증가하고 있다. 그런데, 웹폰트는 다운로드 받아야하므로 크기가 큰 경우 웹페이지가 먼저 렌더링되는 경우가 있다. 이럴 때, 레이아웃이 출렁거리는 것을 느낄 수 있다. 웹폰트를 다 받으면 시스템 폰트로 그린 페이지를 다시 그리기 때문이다.
위 사이트에서는 그러한 문제를 잘 설명했고, 어떻게 해결할 수 있는지 소개하고 있다..
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
'Web' 카테고리의 다른 글
Edge WebView2로 나만의 웹브라우저 만들기 (0) | 2024.01.27 |
---|---|
headless 브라우저 감지 회피하기 (0) | 2023.06.09 |
타입스크립트(Typescript) 스타터 코드 (0) | 2022.09.04 |
웹엔진 Electron, NW.js, CEF, Qt WebEngine 에 관하여.. (0) | 2021.06.09 |
Crosswalk을 소개한 블로그글 (0) | 2016.03.31 |
댓글()