[css] font-family 속성에 여러 폰트 등록하여 사용하는 경우 (+언어별로 폰트 설정하는 방법)

오늘은 css 속성 중 하나인 font-family 사용법에 대해 정리해보도록 하겠습니다.

css 속성 font-family 사용법

1) font-family 속성을 사용해서 웹 페이지 내 요소들의 폰트를 지정해줄 수 있습니다. 

 

body {
    font-family: "맑은고딕";
}

 

2) 위와 같이 하나의 폰트를 선언할 수도 있지만, font-family에 여러 개의 폰트를 선언해줄 수도 있습니다. 브라우저에서 첫 번째 폰트를 사용할 수 없다면, 두 번째, 세 번째 등 사용 가능한 것을 사용하라는 의미입니다.  

 

body {
    font-family: "맑은고딕", "Times New Roman", serif;
}

 

그런데 여기서 "맑은고딕", "Times New Roman"은 특정 폰트를 지칭하지만 serif는 삐침 있는 명조계열 글꼴 모음을 의미합니다. serif, sans-serif, cursive, monospace 등을 generic-family라고 부르는데, 시스템 폰트 중에서 사용자가 의도한 스타일과 유사한 서체를 알아서 선택해서 사용하라고 할 때 사용합니다. 

 

serif: 삐침 있는 명조계열 글꼴 모음

sans-serif: 삐침 없는 고딕계열 글꼴 모음

cursive: 손 필기체 같은 느낌의 글꼴 모음

monospace: 글자 폭과 간격이 일정한 글꼴 모음

 

font-family 속성을 사용할 때는 이와 같이 마지막에는 generic-family를 넣어주는 것이 안전합니다.

 

3) 만약 브라우저에서 기본적으로 제공하지 않는 폰트를 사용하고 싶다면 @font-face 규칙을 사용하여 커스텀 폰트를 정의하고 로드할 수 있습니다.

 

@font-face {
    font-family: 'Mingyung';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/naverfont_08@1.0/Mingyung.woff') format('woff');
}

body {
    font-family: "Mingyung";
}

 

민경 폰트의 위치를 src에 정의하고, format()으로 폰트 파일의 형식을 지정합니다. 여기서는 WOFF (Web Open Font Format) 형식을 사용하고 있습니다. 해당 폰트 명을 Mingyung이라고 명명한 후 이후에 사용할 때도 font-family: "Mingyung"으로 사용하면 됩니다. 

 

4) 만약 @font-face로 정의한 폰트를 특정 언어에만 사용하고 싶다면 unicode-range 속성으로 컨트롤할 수 있습니다. Mingyung 폰트는 한글에만 적용하고 싶다면 아래와 같이 unicode-range 속성에 한글의 유니코드 범위를 넣어주면 됩니다.

 

@font-face {
    font-family: 'Mingyung';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/naverfont_08@1.0/Mingyung.woff') format('woff');
    unicode-range: U+AC00-D7A3; /* 한글 */
}

body {
    font-family: "Mingyung", "Times New Roman", sans-serif;
}

 

그러면 결과적으로 body 내 한글은 Mingyung 폰트로 그 외 텍스트는 Times New Roman이 적용될 것이고 그것이 지원되지 않는 언어라면 sans-serif가 적용될 것입니다. 이런 방식으로 한글은 어떤 폰트, 영어는 어떤 폰트, 일본어는 어떤 폰트, 숫자는 어떤 폰트를 사용하라고 지정해주는 것이 가능합니다. 

 

참고자료

[1] https://jigeumblog.tistory.com/39. 

[2] https://github.com/necolas/normalize.css/issues/665. 

[3] https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family   

[4] https://velog.io/@zaixu/220707