[CSS] 웹폰트 정리

🐱‍🏍 목표

• 웹폰트 사용법 정리

---

📌 1. 개요

1-1) 정의

• 로컬 폰트와 관계 없이 특정 서버에 설치된 폰트를 다운로드하여 표시

1-2) 기본값

1. 웹 폰트를 사용하지 않는 경우

• 나눔고딕 미설치 PC : 돋움
• 나눔고딕 설치 PC : 나눔고딕

2. 웹 폰트를 사용하는 경우

• 나눔고딕
  

---

📌 2. @font-face

• Chrome 브라우저에서 실습 한다는 가정

2-1) 기본적인 사용법

@font-face {
 font-family: NanumSquareWeb;
 src: local(NanumSquareR), /* 첫번째 */
      local(NanumSquare), /* 두번째 */
      url(NanumSquareR.eot), /* 세번째 */
      url(NanumSquareR.woff), /* 네번째 */
      url(NanumSquareR.ttf); /* 다섯번째 */
}

• 1~5번 순으로 순차적으로 탐색
• 3번째 요소는 Chrome에서 지원하지 않는 형식, 불 필요한 탐색 수행

2-2) format()를 통한 개선

@font-face {
  font-family: NanumSquareWeb;
  src: local(NanumSquareR), /* 첫번째 */
       local(NanumSquare), /* 두번째 */
       url(NanumSquareR.eot) format('embedded-opentype'),
       url(NanumSquareR.woff) format('woff'), /* 세번째 */
       url(NanumSquareR.ttf) format('truetype'); /* 네번째 */
 }

• 개선된 방식이자, 기본적으로 사용되는 형식
• format() : 브라우저에서 지원하는 폰트 타입만 탐색하기 위함

2-3) font-weight

@font-face {
 font-family: NanumSquareWeb;
 src: url(NanumSquareL.woff) format('woff');
 font-weight: 300;
}

@font-face {
 font-family: NanumSquareWeb;
 src: url(NanumSquareR.woff) format('woff');
 font-weight: 400;
}

.section1 {
 font-family: NanumSquareWeb;
 font-weight: 300;
}

.section2 {
 font-family: NanumSquareWeb;
 font-weight: 400;
}

• font-weight를 통해 폰트 세분화를 처리하는 방식
• 지정한 font-weight가 없는 경우 다음과 같은 규칙을 따른다.
  • 600 이상 : 큰 수 탐색, 작은 수 탐색
  • 300 이하 : 작은 수 탐색, 큰 수 탐색
  • 400 : 500 혹은 300 이하 규칙 적용
  • 500 : 400 혹은 300 이하 규칙 적용

* font-weight 보다 권장하는 방식

@font-face {
 font-family: NanumSquareWeb-Light;
 src: url(NanumSquareL.woff) format('woff');
 font-weight: 300;
}

@font-face {
 font-family: NanumSquareWeb-LightB;
 src: url(NanumSquareR.woff) format('woff');
 font-weight: 400;
}

.section1 {
 font-family: NanumSquareWeb-Light;
}

.section2 {
 font-family: NanumSquareWeb-LightB;
}

2-4) 브라우저 호환성을 고려한 @font-face

@font-face {
  font-family: NanumSquare;
  src: url(NanumSquareR.eot); /* IE 호환성 보기 */
  src: url(NanumSquareR.eot#iefix) format('embedded-opentype'), /* IE 6 ~ 8 */
       url(NanumSquareR.woff2) format('woff2'), /* WOFF2 지원 브라우저 */
       url(NanumSquareR.woff) format('woff'), /* 모던 브라우저 */
       url(NanumSquareR.ttf) format('truetype');
 }

---

📌 3. 성능 & 이슈

3-1) 성능

• 폰트 서버 : Local vs CDN >> Local Win !!!
• 링크 주소 : data-uri vs url
  • 크기가 작은 데이터 : data-uri
  • 크기가 큰 데이터 : url

3-2) 이슈

• FOUT : 기본서체 > 웹 폰트 로드시 깜빡임 (IE)
• FOIT : 웹폰트 로드 완료 후, 페이지 로드를 해서 텍스트가 안보임 (IE 제외)
• FOFT : 웹 폰트 파일에 기본 weight, style 지정시
  시스템글꼴 > 웹 폰트 default > 웹 폰트 custom 순으로 변경

---

출처

김원준님_포스팅