CSS의 font-family 속성은 선택한 요소에 특정 글꼴을 적용할 때 사용합니다. 브라우저마다 지원하는 글꼴이 다르기 때문에, 하나의 글꼴만 지정하기보다는 여러 개의 대체 글꼴(fallback font)을 함께 명시하여 웹 안전(web-safe) 글꼴을 구성하는 것이 좋습니다. 이렇게 하면 어떤 브라우저나 운영체제에서도 의도한 스타일에 가깝게 화면이 표시됩니다.
참고로, 글꼴 이름에 공백이 포함된 경우(예: "Segoe Print")에는 반드시 따옴표로 묶어야 하며, 마지막에는 serif, sans-serif, monospace 같은 일반 글꼴 계열(generic family)을 지정해 두는 것이 안전합니다.
문법(Syntax)
CSS font-family 속성의 기본 문법은 다음과 같습니다.
선택자 {
font-family: /*값*/;
}예제 1 – 제목과 본문에 서로 다른 글꼴 적용
다음 예제는 h2 요소와 p 요소에 각각 다른 글꼴을 지정하고, 대체 글꼴을 함께 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
background-color: thistle;
font-family: "Magneto", Arial;
}
p {
font-family: "Segoe Print", serif;
font-size: 1.4em;
}
</style>
</head>
<body>
<h2>Learn Fortran</h2>
<p>Fortran, as derived from Formula Translating System, is a general-purpose, imperative programming language. It is used for numeric and scientific computing.</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2 – 표(table) 요소에 글꼴 적용하기
font-family 속성은 표의 캡션, 헤더 셀(th), 데이터 셀(td) 등 요소별로 개별적으로 적용할 수도 있습니다. 아래 예제를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
th {
font-family: "Franklin Gothic Book", Arial;
border: thin solid blue;
}
td {
font-family: "Lucida Console", serif;
font-size: 1.1em;
box-shadow: inset 0 0 3px black;
}
caption {
font-family: Broadway;
font-size: 24px;
}
</style>
</head>
<body>
<table>
<caption>Demo Table</caption>
<tr>
<th>DEMO 1</th>
<th>DEMO 2</th>
</tr>
<tr>
<td>demo a</td>
<td>demo b</td>
</tr>
<tr>
<td>demo c</td>
<td>demo d</td>
</tr>
</table>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
정리
font-family 속성을 활용하면 요소별로 원하는 글꼴을 자유롭게 지정할 수 있습니다. 핵심은 첫 번째 글꼴이 사용자 환경에 없을 경우를 대비해, 비슷한 스타일의 대체 글꼴과 일반 글꼴 계열을 순서대로 나열하는 것입니다. 이 습관 하나만으로도 다양한 브라우저 환경에서 훨씬 안정적인 타이포그래피를 구현할 수 있습니다.