CSS로 웹 폰트 설정하기

이 포스트에서는 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/에 가면 여러 웹 폰트가 제공됩니다. 한글을 포함하는 웹 폰트는 https://fonts.google.com/earlyaccess에서 찾으시면 됩니다.

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다