[CSS] 폰트 (font) - 웹 폰트 (Web Font)

실무에서 폰트 관련해서 주로 사용되는 명칭으로 '시스템 폰트', '이미지 폰트', '웹 폰트'가 있다. 

 

시스템 폰트 : font-family로 선언한 글꼴이 사용자 시스템에 기본으로 설치 되어 있어 사용할 수 있는 경우

이미지 폰트 : 글자를 표현함에 있어 시각적인 요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우를 의미한다. 이미지 폰트는 폰트가 아니라 이미지이다. 

웹 폰트 : 서버에 저장해 제공하거나, 웹 경로를 통해 사용하는 폰트를 의미한다. 

 

@font-face

웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성이다. (기본 값 : 없음)

@font-face { 
    /* font-properties */
}

 

@font-face의 속성 값

< 필수 >

font-family : 글꼴의 이름을 지정

src : 다운로드 받을 글꼴의 경로(URL)

 

< 옵션 >

웹폰트는 선언 시 필요에 따라 굵기나 스타일 등을 같이 지정해서 사용할 수 있다.

font-style : 글꼴의 스타일 지정, 기본 값은 normal

font-weight : 글꼴의 굵기 지정, 기본 값은 normal

@font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.eot);   /* 적용 될 웹 폰트의 경로 */
    font-weight: bold;           /* 필요에 따라 지정 */
    font-style: italic;          /* 필요에 따라 지정 */
}

body {
    font-family: webNanumGothic; /* 지정한 웹 폰트 사용 */
}

 

ref.

wit.nts-corp.com/2017/02/13/4258

웹폰트 사용하기 (웹폰트 101)

web.dev/fast/#optimize-webfonts

web.dev