개발 도구 (Development Tools)/HTML & CSS

언어별로 폰트 다르게 적용하기 (@font-face)

BiCute 2022. 4. 8. 10:00
반응형

"폰트는 한글은 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 코드 형태로 제공

 

반응형