테스트 사이트 - 개발 중인 베타 버전입니다

웹폰트 너무 무겁게 쓰지 마세요 (실무 디자이너 필독!)

· 5개월 전 · 378 · 1

안녕하세요, 웹 퍼블리싱 하시는 분들이라면 다들 한번쯤 느껴보셨을 거예요.
"사이트는 멋진데 왜 이렇게 느리지?"
그 원인 중 하나가 바로 웹폰트(Web Font) 과다 사용입니다.

 

웹폰트는 최대 2종 이내로 줄이세요

한글 폰트는 용량이 크기 때문에 subset(부분 글리프) 만 쓰는 것도 고려

font-display: swap; 꼭 사용해서 FOUT(깜빡임) 방지

 

@font-face {
  font-family: 'GmarketSans';
  src: url('/fonts/GmarketSans.woff2') format('woff2');
  font-display: swap;
}
 

예쁜 건 정말 중요하지만,
빠른 로딩 + UX + 접근성까지 고려한 디자인이
진짜 실력 있는 디자이너의 작품이라는 걸 점점 느끼고 있습니다 ^^

댓글 작성

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

로그인하기

댓글 1개

감사합니다 잘봤습니다 : ) 

게시판 목록

디자이너팁

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기