웹폰트 로딩 최적화 정보
CSS 웹폰트 로딩 최적화본문
웹폰트 로딩이 느리면 화면에 기본 폰트가 깜빡 나타났다 바뀌는 FOUT(Flash of Unstyled Text) 현상이 발생
font-display: swap; 사용하여
@font-face {
font-family: 'Pretendard';
src: url('Pretendard.woff2') format('woff2');
font-display: swap;
}
<link rel="preload">로 불러오기
<link rel="preload" href="/fonts/Pretendard.woff2" as="font" type="font/woff2" crossorigin="anonymous">
자주 쓰는 폰트는 CDN 말고 직접 호스팅하는 게 로딩 안정성에 더 좋음
추천
6
6
댓글 3개
감사합니다
감사합니다~
감사합니다.
