이전
목록
다음
선

웹폰트 로딩 최적화

선택과집중
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 8개월 전 · 923 · 3

웹폰트 로딩이 느리면 화면에 기본 폰트가 깜빡 나타났다 바뀌는 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 말고 직접 호스팅하는 게 로딩 안정성에 더 좋음

|

댓글 3개

민트다이어리
프로필 보기이 회원 글보기이 회원의 댓글보기
 8개월 전

감사합니다 

아이스웨덴™
프로필 보기이 회원 글보기이 회원의 댓글보기
 8개월 전

감사합니다~

댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 2개월 전 조회 268
CSS 2개월 전 조회 242
CSS 2개월 전 조회 239
CSS 3개월 전 조회 326
CSS 3개월 전 조회 335
기타 5개월 전 조회 451
CSS 5개월 전 조회 654
CSS 6개월 전 조회 678
CSS 6개월 전 조회 815
기타 7개월 전 조회 711
CSS 7개월 전 조회 868
CSS 8개월 전 조회 924
CSS 8개월 전 조회 814
CSS 8개월 전 조회 874
CSS 9개월 전 조회 703
1년 전 조회 883
HTML 1년 전 조회 1,160
CSS 1년 전 조회 1,039
2년 전 조회 1,529
HTML 2년 전 조회 990
CSS 2년 전 조회 1,298
CSS 2년 전 조회 1,231
HTML 2년 전 조회 1,756
기타 2년 전 조회 1,024
CSS 2년 전 조회 1,807
HTML 2년 전 조회 1,639
CSS 2년 전 조회 1,501
2년 전 조회 3,875
2년 전 조회 5,396
2년 전 조회 1,866
이전 첫 페이지 다음
글쓰기