이모저모

[Web Font] 웹 폰트에 대해서 알아보자

눙엉 2022. 1. 14. 00:15

Font 관련 에러 (Failed to decode downloaded font)가 계속 발생하고 화면이 깜빡이는 거 같길래

이참에 Font에 관해 공부해보자고 생각이 들었다. 

추후에 발생한 에러에 대해도 해결하고 추가 글을 작성할 것이다.


웹 폰트란 무엇인가?

사용자의 폰트 여부와 관계없이 서버에 있는 폰트를 사용하여 렌더링 해주는 방법이다.

 

예를 들어서 웹 폰트를 사용하면 사용자가 폰트 여부와 관계없이 사용 가능하지만 웹 폰트를 사용하지 않으면 기본 폰트가 사용 될 것이다.

 

특히 모바일에서 큰 장점이 되는데 기기마다 탑재된 폰트가 달라서 적용하기 어려웠던 문제가 해결된다.

 

사용법

Font-family

body { font-family: sans-serif, NanumGothic; }

font-family는 왼쪽부터 순서대로 sans-serif를 사용하는 것이고 없다면 NanumGothic을 사용하라는 것이다.

 

만약 이름이 하나 이상의 단어로 구성되어 있으면 작은따옴표로 묶어주어야 한다.

 

@font-face

@font-face {
  font-family: NanumSquareWeb;
  src: local(NanumSquareR),
       local(NanumSquare),
       url(NanumSquareR.eot?#iefix) format('embedded-opentype'),
       url(NanumSquareR.woff) format('woff'),
       url(NanumSquareR.ttf) format('truetype');
  font-style: normal;
  font-weight: normal;
}
h1 {
  font-family: NanumSquareWeb, sans-serif;
}
  • font-family : 폰트의 이름을 설정한다. 원하는 대로 작성 가능하다.
  • src : 폰트의 경로와 포맷을 설정한다.
  • font-style : 글꼴체를 설정한다.
  • font-weight : 폰트의 굵기 (숫자가 커질수록 굵어진다)

 

font-family

font-family 속성을 사용해서 NanumSquareWeb 폰트를 사용한다고 선언한다. 

여기서 사용할 폰트명과 font-family이름이 동일하지 않아도 되나 유지보수를 위해 동일하게 하자

 

src

@font-face {
    font-family: 'NanumGothic;
    src: local('NanumGothic');  /* System font */
    src: local('NanumGothic.eot');  /* IE 8 버전 이하 */
    src: local('※'), /* else ... */
           url('../fonts/NanumGothic.woff2') format('woff2'),  
           url('../fonts/NanumGothic.woff') format('woff'),
           url('../fonts/NanumGothic.ttf') format('truetype');
    font-style: normal;
    font-weight: 100;
}

두 가지 local(), url() 속성이 있다.

 

브라우저는 순차적으로 브라우저에 사용할 수 있는 폰트를 검색하게 된다.

 

각 브라우저마다 지원하는 글꼴 형식이 달라 불필요한 다운로드를 막기 위해 format속성을 사용한다.

브라우저에서 지원 가능한 파일만 다운로드할 수 있다.

 

IE6~8 버전은 굳이 다운하지 않아도 되는 woff를 다운로드하기 때문에 eot 글꼴을 woff 보다 위에 작성한다. 

 

font-style

h1 {
  font-style: normal;
}
h2 {
  font-style: italic; /*이탤릭체*/
}
h3 {
  font-style: oblique; /*이탤릭체와 크게 다른 점은 없다.*/
}

 

font-weight

@font-face {
  font-family: NanumGothic;
  src: url(NanumGothicL.woff) format('woff');
  font-weight: 300;
}
@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumGothicR.woff) format('woff');
  font-weight: 400;
}
@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumGothicB.woff) format('woff');
  font-weight: 700;
}
@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumGothicEB.woff) format('woff');
  font-weight: 800;
}

같은 폰트에서 font-weight를 사용해서 굵기를 다르게 사용할 수 있다. 

 

만약 여기서 설정해주지 않은 값들을 사용하면 어떻게 될까?

 

font-weight:200을 하게 되면 font-weight:300이 적용되며 font-weight이 가장 가까운 값이 적용된다.

 

Referencese