"폰트는 한글은 Noto Sans KR로, 영어는 Roboto로, 숫자는 Spoqa Han Sans Neo로 부탁드려요."
이런 요청을 받으면, 매번 해당 언어마다 폰트를 지정해 줄 수도 없는 노릇인데, 이럴 때 @font-face를 사용하면 쉽게 해결할 수 있습니다.
#1 웹 폰트
웹 폰트는 사용자가 현재 사용하는 기기에 서체를 설치하지 않았더라도 @font-face 명령을 통해서 웹 브라우저에서 폰트를 다운로드하여 사용자에게 보여줍니다.
웹 폰트를 사용하기 위해서는 @font-face로 해당 폰트를 다운로드할 위치를 지정해주고,
font-family 속성을 사용하여 적용 할 수 있습니다.
사용 예)
@font-face {
font-family: 'Gugi-Regular';
font-style: normal;
font-weight: 400;
src: local('Gugi-Regular'),
url(./fonts/Gugi-Regular.woff2) format("woff2"),
url(./fonts/Gugi-Regular.woff) format("woff"),
url(./fonts/Gugi-Regular.ttf) format("truetype");
url(./fonts/Gugi-Regular.eot),
unicode-range: U+0041-005A, U+0061-007A;
}
*사용하는 방식에 따라 같은 폰트를 굵기와 기울기에 따라서 여러 번 등록하는 경우도 있지만 그 경우가 아니라면 font-style과 font-weight는 굳이 작성하지 않아도 상관없을 것입니다.
*위에 소스 주소를 적어주는 src 항목에 쓸데없이 뭔가 길게 적혀있는 것을 볼 수 있는데, 자신에게 해당되는 부분에 맞춰 사용하시면 됩니다.
#2 웹 폰트의 확장자
eot(Embedded Open Type) : IE 8 이하에서만 사용됩니다.
ttf(TrueType format), otf(OpenType format) : 가장 널리 사용되는 타입. 일반 폰트 사이트에서 다운로드하면 이와 같은 확장자를 가진 경우가 많습니다.
woff(Web Open Font Format) : web을 대상으로 설계된 폰트 형태. 다른 서체보다 다운로드 속도가 빠릅니다.
woff2(Web Open Font Format2) : woff보다 압축률이 더욱 상승.
웹 폰트를 @font-face에 적용할 때에는...
(1) local 을 가장 먼저 적어줍니다.
local은 시스템에 해당 폰트가 설치되어 있다면 리소스를 요청하지 않고 바로 적용할 수 있음.
(2) 나머지 폰트들은 선언된 순서를 기준으로 사용할 수 있는 폰트를 다운로드하기 때문에 압축률이 가장 좋은 순으로 작성합니다.
또한 format 형식은 반드시 적어줘야 합니다.
순서 예) woff2 > woff > otf > ttf > eot
포멧 예 ) eot('embedded-opentype'), otf('opentype'), ttf('truetype'), woff('woff'), woff2('woff2')
(3) 라이선스 사용 제한에 주의합니다.
무료 폰트라고 배포하는 상당히 많은 폰트들이 출판물 등으로는 사용 가능하더라도 웹 폰트(웹에서 사용하는 경우)는 제한하고 있는 경우가 많습니다.
#3 언어별로 다르게 폰트를 적용하는 방법
위에서 언급한 @font-face의 속성 중 unicode-range를 사용하여 지정한 유니코드의 범위에 속한 대상들에게만 해당 폰트를 적용시켜 줄 수 있습니다.
중요 유니코드의 범위는 다음과 같습니다.
• 전체 : U+0020-007E
• 한글 : U+AC00-U+D7A3
• 영문 (대문자) : U+0041-005A
• 영문 (소문자) : U+0061-007A
• 숫자 : U+0030-0039
• 특수문자 : U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
*unicode-range는 가장 마지막에 작성해 줍니다.
그 외 유니코드가 궁금하다면 WIKIPEDIA에서 확인해보세요
#4 실제로 적용하는 방법
@font-face {
font-family: 'BiCute';
src: url(./fonts/Gugi-Regular.ttf) format('truetype');
unicode-range: U+AC00-U+D7A3;
}
@font-face {
font-family: 'BiCute';
src: url(./fonts/GrapeNuts-Regular.ttf) format('truetype');
unicode-range: U+0041-005A, U+0061-007A;
}
@font-face {
font-family: 'BiCute';
src: url(./fonts/BlackAndWhitePicture-Regular.ttf) format('truetype');
unicode-range: U+0030-0039;
}
* { font-family: 'BiCute', sans-serif ; }font-family 이름은 원하는 이름으로 지정해줄 수 있습니다.
위와 같이 지정할 경우 다음과 같이 한글 / 영어 / 숫자가 모두 다르게 나타나는 것을 확인할 수 있습니다.
추가로, font-family로 적용할 경우 경우 대체 글꼴도 함께 작성해놓도록 합시다.
참고
google webfonts helper : 웹 폰트를 확장자 별로 다운로드할 수 있으며, CSS 코드 형태로 제공