CSS / Reference / font-family
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입니다.
적용되지 않거나 예상과 다를 때
- 글꼴 이름의 철자, 따옴표와 쉼표를 확인합니다.
- 웹 폰트의 네트워크 요청, 접근 제한과 @font-face의 family 이름 일치를 확인합니다.
텍스트 그림자의 위치·흐림·레이어 순서를 조정합니다. 박스 그림자와의 차이, 잘림 및 실제 글자 대비를 함께 점검합니다.
CSS / Reference / accent-color
체크박스·라디오·범위·진행률의 기본 강조색을 지정합니다. 레이블과 키보드 조작, disabled·appearance 및 운영체제별 차이를 확인합니다.
사용 중단된 clip의 좌표를 읽고 clip-path의 inset 거리와 비교합니다. 절대 위치 조건과 크기 변경 시 좌표 재계산을 설명합니다.
CSS / Reference / background-repeat
repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.
가상 요소에 문자열·속성값·장식 도형을 생성하는 방법을 설명합니다. 빈 문자열과 none의 차이를 실습하고 중요한 정보를 HTML에 남기는 기준을 확인합니다.
CSS / Reference / border-width
테두리 두께의 1~4개 값 대응과 실제 외곽 크기를 확인합니다. none·hidden의 계산값과 hover 시 배치 변화, outline 대안을 설명합니다.
CSS / Reference / background-clip
배경을 border·padding·content 영역 또는 텍스트에 맞춰 자릅니다. 위치 기준과의 차이, 투명 글자의 대체 색과 강제 색상 환경을 확인합니다.
CSS / Reference / background-origin
배경의 위치·크기 기준을 content·padding·border 영역으로 바꾸어 비교합니다. clip과의 차이 및 백분율 크기 기준을 수치로 확인합니다.
CSS / Reference / background-attachment
요소 내부와 페이지 스크롤을 나누어 local·scroll·fixed의 기준을 비교합니다. 별도 실행 예제와 모바일에서 확인해야 할 조건을 제공합니다.
부모와 루트 글자 크기를 기준으로 em·rem을 계산합니다. 중첩된 상대 크기의 차이와 확대 시 잘림을 확인하는 방법을 제공합니다.