728x90
반응형
웹 폰트 적용하는 방법
웹 폰트를 통해 다른 사용자의 컴퓨터에 설치되지 않은 폰트를 사용할 수 있습니다.
구글의 'Noto Sans KR' 폰트를 예를 들어 설명하겠습니다.
여기를 클릭하시면 'Noto Sans KR' 폰트를 다운로드할 수 있습니다.
CSS 내에 @font-face 규칙 정의하기
@font-face {
font-family: 'Noto Sans KR'; /* 필수 항목 */
src: url('https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2') format('woff2'); /* 필수 항목 */
font-style: normal; /* 옵션 항목 */
font-weight: normal; /* 옵션 항목 */
font-stretch : normal; /* 옵션 항목 */
}
필수 항목
- font-family : 폰트의 이름을 정의합니다.
- src : 폰트 파일의 url을 정의합니다. url은 구글의 폰트 경로를 사용해도 되고, 자신의 서버에 폰트를 설치하여 그 경로를 사용해도 됩니다.
format은 필수 항목은 아니지만, 폰트의 형식을 정의하는 속성입니다. format에는 truetype , opentype , woff , woff2 , embedded-opentype , svg 등의 값을 넣을 수 있습니다.
폰트 형식에 대해서는 아래에서 더 자세하게 말씀드리겠습니다.
옵션 항목
- font-style : 폰트 스타일을 정의합니다. normal , italic , oblique 3가지 값을 사용할 수 있으며, normal 이 기본값입니다.
- font-weight : 폰트 굵기를 정의합니다. normal , bold , 100 ~ 900 까지 100 단위의 값을 사용할 수 있으며, normal 이 기본값입니다.
- font-stretch : 글자 폭을 늘리거나 줄일 때 사용하는 속성입니다. normal , condensed , ultra-condensed , extra-condensed , semi-condensed , expanded , semi-expanded , extra-expanded , ultra-expanded 9가지 값을 사용할 수 있으며, 이 역시 normal 이 기본값입니다.
div { font-family: 'Noto Sans KR', sans-serif; }
@font-face로 정의한 폰트를 위와 같이 사용하고자 하는 요소에 적용하면 됩니다.
sans-serif : 고딕체와 같이 획의 삐침이 없는 폰트를 사용할 때 함께 써줍니다.
serif : 바탕체와 같이 획의 삐침이 있는 폰트를 사용할 때 함께 써줍니다.
폰트 형식
- TrueType Fonts(TTF)
TrueType은 1980년대 후반 Apple과 Microsoft에서 개발한 글꼴 표준입니다. Mac OS 및 Microsoft Windows 운영 체제에서 가장 일반적인 글꼴 형식입니다. - OpenType Fonts(OTF)
OpenType은 확장 가능한 컴퓨터 글꼴의 형식입니다. TrueType을 기반으로 제작되었으며 Microsoft의 등록 상표입니다. 오늘날 주요 컴퓨터 플랫폼에서 일반적으로 사용됩니다. - The Web Open Font Format(WOFF)
WOFF는 웹 페이지에서 사용하기 위한 글꼴 형식입니다. 2009년에 개발되었으며 현재는 W3C 권장사항입니다. WOFF는 기본적으로 압축 및 추가 메타 데이터가 포함된 OpenType 또는 TrueType입니다. 목표는 대역폭 제약이 있는 네트워크를 통해 서버에서 클라이언트로 글꼴 배포를 지원하는 것입니다. - The Web Open Font Format (WOFF 2.0)
WOFF 1.0보다 더 나은 압축을 제공하는 TrueType / OpenType 글꼴입니다. - SVG Fonts/Shapes
SVG 글꼴을 사용하면 텍스트를 표시할 때 SVG를 글리프로 사용할 수 있습니다. SVG 1.1 규격은 SVG 문서 내에서 글꼴을 만들 수 있는 글꼴 모듈을 정의합니다. 또한 SVG 문서에 CSS를 적용할 수도 있고 SVG 문서의 텍스트에 @ font-face 규칙을 적용할 수도 있습니다. - Embedded OpenType Fonts (EOT)
EOT 글꼴은 웹 페이지에 포함된 글꼴로 사용하기 위해 Microsoft에서 설계한 OpenType 글꼴의 압축 형식입니다.
폰트 형식에 대한 브라우저 지원
| 폰트 형식 | IE | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| TTF/OTF | 9.0* | 4.0 | 3.5 | 3.1 | 10.0 |
| WOFF | 9.0 | 5.0 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 14.0 | 36.0 | 39.0 | 10.0 | 26.0 |
| SVG | 미지원 | 미지원 | 미지원 | 3.2 | 미지원 |
| EOT | 6.0 | 미지원 | 미지원 | 미지원 | 미지원 |
* IE : 글꼴 형식은 '설치 가능'으로 설정된 경우에만 작동합니다.
728x90
