이전글 목록 다음글
선

웹폰트 로딩 최적화

선택과집중
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 7개월 전 · 867 · 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개

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

감사합니다 

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

감사합니다~

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

퍼블리셔팁

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

+
분류 제목 글쓴이 날짜 조회
CSS 1개월 전 조회 199
CSS 1개월 전 조회 179
CSS 2개월 전 조회 177
CSS 2개월 전 조회 276
CSS 2개월 전 조회 280
기타 4개월 전 조회 391
CSS 5개월 전 조회 593
CSS 5개월 전 조회 612
CSS 6개월 전 조회 753
기타 6개월 전 조회 661
CSS 7개월 전 조회 812
CSS 7개월 전 조회 868
CSS 8개월 전 조회 763
CSS 8개월 전 조회 814
CSS 8개월 전 조회 645
1년 전 조회 822
HTML 1년 전 조회 1,109
CSS 1년 전 조회 983
2년 전 조회 1,476
HTML 2년 전 조회 932
CSS 2년 전 조회 1,237
CSS 2년 전 조회 1,179
HTML 2년 전 조회 1,690
기타 2년 전 조회 960
CSS 2년 전 조회 1,748
HTML 2년 전 조회 1,585
CSS 2년 전 조회 1,439
2년 전 조회 3,815
2년 전 조회 5,302
2년 전 조회 1,809
이전 첫 페이지 다음
글쓰기