이 포스트에서는 CSS로 웹 폰트를 설정하는 방법에 대해 설명합니다.
웹 폰트로 사용할 수 있는 폰트는 대개 TTF, OTF, WOFF, WOFF2, SVG, EOT의 6가지가 있습니다.
- TTF
- 여러 곳에서 두루 사용되는 표준 트루타입 글꼴입니다. 거의 모든 브라우저에서 지원합니다. 다만 인터넷 익스플로러에서는 9부터 지원합니다.
- OTF
- TTF를 기반으로 한 오픈타입 글꼴입니다. TTF와 마찬가지로 거의 모든 브라우저에서 지원합니다. 다만 인터넷 익스플로러에서는 9부터 지원합니다.
- WOFF
- TTF와 OTF를 대신하여 웹 폰트용으로 2009년 개발된 형식입니다. 웬만한 브라우저에서는 대부분 지원합니다. 다만 인터넷 익스플로러에서는 9부터 지원합니다. 가급적이면 이 형식을 사용할 것을 권장합니다.
- WOFF2
- 기존의 WOFF를 개량한 형식입니다. 아직은 구글 크롬 등 몇몇 브라우저에서만 실험적으로 지원하고 있습니다.
- SVG
- 말 그대로 SVG 형식으로 만들어진 웹 폰트입니다. 구글 크롬이나 사파리, 오페라 등에서 WOFF를 지원하기 전에 지원하기 시작하였습니다.
- EOT
- 마이크로소프트에서 웹 폰트용으로 개발한 형식입니다. 인터넷 익스플로러에서만 지원합니다.
이를 CSS 코드로 설정하면 다음과 같습니다.
@font-face {
font-family: fontname;
src: url(url);
}
selector {
font-family: fontname;
}
1번 줄과 같이 선택자를 @font-face로 하여 불러올 폰트를 설정합니다. font-family 속성에는 글꼴 이름을, src 속성에는 웹 폰트의 URL을 지정합니다. 선택적으로 font-stretch, font-style, font-weight, unicode-range 속성을 추가할 수 있습니다. 이들은 각각 글꼴의 폭, 글꼴 기울임 여부, 글꼴 굵기, 유니코드 범위를 의미합니다.
추가 속성은 다음과 같습니다.
- font-stretch: normal, condensed, ultra-condensed, extra-condensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultra-expanded
- font-style: normal, italic, oblique
- font-weight: normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900
- unicode-range: 유니코드의 범위를 지정 (기본값은 U+0-10FFFF)
그리고 6번 줄부터 8번 줄까지는 정의된 웹 폰트를 적용하는 코드입니다.
@font-face {
font-family: Ubuntu;
src: url(ubuntu.woff);
}
div {
font-family: Ubuntu;
}
예를 들어 이렇게 쓸 경우 ubuntu.woff 파일로부터 Ubuntu 폰트를 읽어들인 후 이를 div 태그에 적용하게 됩니다.
참고로 https://fonts.google.com/