CSS font-family 속성이란?
font-family 속성은 HTML 요소에 적용되는 글꼴의 서체(face)를 변경하는 데 사용되는 CSS 속성입니다. 속성값으로는 시스템에 설치된 모든 글꼴 계열(font family) 이름을 지정할 수 있으며, 필요에 따라 여러 개의 글꼴 이름을 쉼표(,)로 구분하여 나열하는 것이 일반적입니다.
font-family 기본 사용 예제
아래 예제는 <p> 태그에 인라인 스타일로 font-family 속성을 적용한 코드입니다.
<html> <head> </head> <body> <p style = "font-family:georgia,garamond,serif;"> 이 텍스트는 방문자의 시스템에 설치된 글꼴에 따라 georgia, garamond 또는 기본 serif 글꼴로 렌더링됩니다. </p> </body> </html>
글꼴 대체(Fallback) 동작 이해하기
위 예제처럼 font-family 속성에는 여러 글꼴 이름을 순서대로 나열할 수 있습니다. 브라우저는 목록의 왼쪽부터 차례대로 확인하며, 사용자 시스템에 해당 글꼴이 설치되어 있으면 그 글꼴로 텍스트를 표시합니다.
예를 들어 font-family:georgia,garamond,serif;라고 지정한 경우 다음과 같이 동작합니다.
- 시스템에 Georgia 글꼴이 있으면 → Georgia로 렌더링
- Georgia가 없고 Garamond가 있으면 → Garamond로 렌더링
- 둘 다 없으면 → 마지막에 지정된 serif(명조 계열) 기본 글꼴로 렌더링
일반 글꼴 계열(Generic Family) 활용
font-family 속성값의 마지막에는 반드시 일반 글꼴 계열(generic family)을 함께 지정하는 것이 좋습니다. 앞서 지정한 특정 글꼴들이 사용자 환경에 없을 경우를 대비하는 안전장치 역할을 하기 때문입니다. 대표적인 일반 글꼴 계열은 다음과 같습니다.
- serif — 획 끝에 장식이 있는 명조 계열 글꼴 (예: Times New Roman, Georgia)
- sans-serif — 장식 없는 고딕 계열 글꼴 (예: Arial, Helvetica)
- monospace — 모든 문자 폭이 같은 고정폭 글꼴 (예: Courier New)
- cursive — 필기체 느낌의 글꼴
- fantasy — 장식적인 디스플레이 글꼴
정리
font-family 속성은 웹페이지의 텍스트 서체를 결정하는 핵심 속성입니다. 여러 글꼴 이름을 쉼표로 나열하고 마지막에 serif, sans-serif 같은 일반 글꼴 계열을 추가하면, 어떤 환경에서 접속하더라도 의도에 가까운 글꼴로 화면이 표시되도록 안정적으로 구성할 수 있습니다.