CSS / Reference / font-family

font-family는 사용할 글꼴 후보를 우선순위대로 지정합니다. 브라우저는 사용 가능한 글꼴과 각 문자를 표시할 수 있는 글리프를 찾아 표시하므로, 한 문장 안에서도 한글과 영문에 서로 다른 글꼴이 사용될 수 있습니다.

문법과 주요 값

body { font-family: "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
code { font-family: Consolas, monospace; }

값의 적용 범위와 문법은 MDN의 font-family 문서에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 font-family-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>font-family 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target { font-family: Georgia, serif; font-size: 24px; }
.reference { font-family: Consolas, monospace; font-size: 24px; }
</style>
</head>
<body>
<main id="demo">
<h1>font-family 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">Georgia, serif</p><div class="target">ABC 012345 / 글꼴 비교</div></div><div class="b"><p class="label">Consolas, monospace</p><div class="reference">ABC 012345 / 글꼴 비교</div></div></section>
</main>
</body>
</html>

두 예문은 서로 다른 글꼴 계열을 요청합니다. 설치된 글꼴과 한글 지원 여부에 따라 실제 모양은 달라지므로 특정 운영체제의 화면을 모든 환경의 결과로 일반화하지 않습니다.

마지막에는 일반 글꼴 계열 지정

후보는 쉼표로 구분하며 일반 계열 이름은 따옴표 없이 씁니다. "sans-serif"처럼 따옴표로 묶으면 그 이름을 가진 특정 글꼴 요청으로 해석될 수 있습니다. 후보 글꼴이 없어도 마지막 일반 계열을 통해 브라우저가 적절한 대체 글꼴을 선택하게 합니다.

글꼴을 지정하는 것과 제공하는 것은 다릅니다

font-family에 이름을 적어도 글꼴이 자동 다운로드되는 것은 아닙니다. 외부 글꼴은 사용할 권한을 확인하고 @font-face 등으로 제공해야 합니다. 개발자 도구의 실제 렌더링 글꼴 표시에서 문자별로 선택된 글꼴을 확인하면 로딩 실패와 글리프 누락을 구분할 수 있습니다.

적용되지 않거나 예상과 다를 때

• 글꼴 이름의 철자, 따옴표와 쉼표를 확인합니다.
• 웹 폰트의 네트워크 요청, 접근 제한과 @font-face의 family 이름 일치를 확인합니다.

관련 설정을 함께 조정할 때는 사용하는 글꼴의 굵기 지정을 참고하세요.