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 / aspect-ratio
선호 가로세로 비율과 이미지의 고유 비율을 구분합니다. auto 조합, 확정 크기, cover·contain의 잘림과 빈 공간을 실행 예제로 비교합니다.
단위 없는 줄 높이와 고정 길이의 상속 결과를 비교합니다. 부모·자식 글자 크기를 바꾸어 계산값과 실제 줄 상자의 차이를 확인합니다.
CSS / Reference / align-content
Flex 줄 묶음과 Grid 트랙의 공간 배분을 비교합니다. nowrap·wrap, auto 트랙 stretch와 일반 블록의 적용 조건을 별도 실습으로 확인합니다.
italic·oblique의 요청과 실제 글꼴 선택을 구분합니다. 서체 파일, 합성 기울임, 의미 있는 강조와 font 단축 속성의 영향을 확인합니다.
CSS / Reference / border-style
테두리 스타일의 1~4개 값 대응과 none의 계산 두께를 설명합니다. 접힌 표에서 hidden이 이웃 경계를 억제하는 차이도 실행 예제로 확인합니다.
CSS / Reference / background-clip
배경을 border·padding·content 영역 또는 텍스트에 맞춰 자릅니다. 위치 기준과의 차이, 투명 글자의 대체 색과 강제 색상 환경을 확인합니다.
실제 탭 문자의 정지 간격을 조절하고 공백 네 개와 구분합니다. 공백 보존 조건과 같은 문자열에서 4·8의 결과를 확인합니다.
텍스트 그림자의 위치·흐림·레이어 순서를 조정합니다. 박스 그림자와의 차이, 잘림 및 실제 글자 대비를 함께 점검합니다.
문단 첫 줄 들여쓰기와 내어쓰기를 만들고 전체 문단 여백과의 차이를 비교합니다. 음수 값, 상속과 좁은 화면에서 필요한 시작 여백을 확인합니다.
중첩 인용에 사용할 여닫는 부호를 지정하고 문자로 입력한 따옴표와 구분합니다. 인용 깊이, 마지막 쌍의 재사용과 none의 동작을 비교합니다.