font-family

CSS Reference

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

문법과 주요 값

속성	초기값	상속	주요 적용 조건
`font-family`	사용자 에이전트에 따라 다름	예	모든 요소; 실제 그림·텍스트·상자의 존재 조건은 본문에서 확인

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

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

값 또는 구분	동작과 선택 기준
`"글꼴 이름"`	공백이 있는 이름은 따옴표로 묶어 명확하게 지정
`sans-serif`	삐침 없는 계열의 일반 글꼴
`serif`	삐침 있는 계열의 일반 글꼴
`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 등으로 제공해야 합니다. 개발자 도구의 실제 렌더링 글꼴 표시에서 문자별로 선택된 글꼴을 확인하면 로딩 실패와 글리프 누락을 구분할 수 있습니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

기존 예문의 영문과 한글 구간을 각각 선택해 Elements → Computed → Rendered Fonts를 확인합니다. CSS 후보 순서와 실제 사용한 글꼴 이름을 나란히 기록합니다.
첫 후보를 존재하지 않는 연습 이름으로 잠시 바꾸어 다음 후보 또는 일반 계열로 대체되는지 확인하고 복구합니다. 다른 OS에서는 실제 선택이 다를 수 있습니다.

문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 font-weight입니다.