@font-face 속성 알고 쓰기

웹개발에서 폰트는 사용자 경험과 디자인에 중요한 역할을 한다. CSS의 @font-face 규칙을 사용하면 웹폰트를 효과적으로 구현할 수 있다.

---

@font-face 기본 구조

@font-face {
  font-family: "폰트 이름";
  src: url("폰트 파일 경로") format("폰트 형식");
  font-weight: 폰트 굵기;
  font-style: 폰트 스타일;
  font-display: 폰트 표시 방식;
  unicode-range: 유니코드 범위;
}

 

font-family
폰트의 이름을 지정한다. 이 이름은 CSS에서 폰트를 참조할 때 사용된다.

 

src
폰트 파일의 경로와 형식을 지정한다. 여러 형식을 지원하기 위해 쉼표로 구분하여 여러 소스를 제공할 수 있다.

 

font-weight
폰트의 굵기를 지정한다. 100부터 900까지의 숫자 값을 사용할 수 있다.

 

font-style
폰트의 스타일(normal, italic, oblique)을 지정한다.

 

font-display

폰트가 로드되는 동안 텍스트를 어떻게 표시할지 지정한다.
주로 사용되는 값은 'block', 'swap', 'fallback', 'optional'.

 

unicode-range

폰트가 적용될 유니코드 범위를 지정한다. 이를 통해 특정 문자에만 폰트를 적용할 수 있다.

 

사용 예시

1. 한글 폰트 설정 (NotoSansKR)

@font-face {
  font-family: "NotoSansKR";
  font-weight: 400;
  src: url("/assets/fonts/NotoSansKR/NotoSans-Regular.woff2") format("woff2"),
       url("/assets/fonts/NotoSansKR/NotoSans-Regular.woff") format("woff");
  font-display: block;
  unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF;
}

이 예시에서는 NotoSansKR 폰트의 Regular 굵기를 설정하고 있다.
unicode-range를 사용하여 한글 문자에만 이 폰트를 적용하도록 지정했다.

 

2. 영문/숫자 폰트 설정 (SUIT)

@font-face {
  font-family: "SUIT";
  font-weight: 400;
  src: url("/assets/fonts/SUIT/SUIT-Regular.woff2") format("woff2"),
       url("/assets/fonts/SUIT/SUIT-Regular.ttf") format("truetype");
  font-display: block;
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A;
}

SUIT 폰트를 영문자와 숫자에만 적용하도록 설정했다.

 

3. 여러 굵기를 지원하는 폰트 설정

@font-face {
  font-family: "Pretendard";
  src: url('/font/Pretendard.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
}

이 예시에서는 하나의 폰트 파일이 여러 굵기를 지원하는 경우를 보여준다. 
font-weight 속성에 범위를 지정하여 400부터 700까지의 굵기를 지원함을 나타낸다.

 

결론

@font-face 규칙을 활용하면 웹 사이트에 다양한 폰트를 효과적으로 적용할 수 있다. 특히 unicode-range를 사용하여 특정 문자 범위에만 폰트를 적용하거나, 여러 형식의 폰트 파일을 제공하여 브라우저 호환성을 높일 수 있다. 또한, font-display 속성을 통해 폰트 로딩 시 사용자 경험을 개선할 수 있다.