CSS에서 font-family 속성은 텍스트에 적용할 글꼴(서체)의 종류를 지정하는 데 사용됩니다. 이 속성의 값으로는 하나 이상의 글꼴 이름을 쉼표로 구분하여 나열할 수 있으며, 브라우저는 사용자 시스템에 설치된 글꼴을 앞에서부터 순서대로 확인하여 가장 먼저 사용 가능한 글꼴을 적용합니다.
font-family 기본 문법
여러 개의 글꼴을 지정하면 첫 번째 글꼴이 시스템에 없을 경우 자동으로 다음 글꼴로 대체되므로, 마지막에는 serif, sans-serif 같은 일반적인 글꼴 계열(generic family)을 함께 명시해 주는 것이 좋습니다.
<html> <head> </head> <body> <p style = "font-family:georgia,garamond,serif;"> 이 텍스트는 시스템에 설치된 글꼴에 따라 georgia, garamond 또는 기본 serif 글꼴로 표시됩니다. </p> </body> </html>
실행 결과
위 예제에서는 우선적으로 Georgia 글꼴이 적용되며, Georgia가 설치되어 있지 않으면 Garamond, 그것도 없다면 시스템 기본 serif(명조 계열) 글꼴로 대체되어 화면에 렌더링됩니다.
글꼴 지정 시 유의 사항
- 두 단어 이상으로 된 글꼴 이름(예: Times New Roman)은 따옴표로 감싸는 것이 안전합니다.
- 한국어 웹 페이지라면 '맑은 고딕', 'Noto Sans KR' 등 한글을 지원하는 글꼴을 함께 지정하는 것이 좋습니다.
- 방문자의 운영체제마다 설치된 글꼴이 다르므로, 항상 대체 글꼴과 generic family를 마지막에 포함시켜야 의도한 스타일이 유지됩니다.