font-family 속성의 이해

font-family 속성은 요소의 글꼴을 지정합니다.

왼쪽에서 오른쪽 순서로 적용할 '글꼴 이름'이나 '글꼴 종류'를 쉼표로 구분하여 여러 개를 목록으로 나열할 수 있으며,
브라우저는 사용할 수 있는 첫 번째 글꼴을 선택해서 화면에 표시합니다.

CSS 데모로 살펴보겠습니다.

CSS 데모: font-family 데모 버튼을 클릭해 보세요!

font-family 속성의 사용 방법을 시각화하면 다음과 같습니다.

CSS 
예시:
font-family: "Noto Sans KR", "맑은 고딕", Helvetica, sans-serif;

설명:
font-family 속성
 └── 요소에 대한 글꼴 지정
     ├── 글꼴 이름 나열
     │    ├── 왼쪽에서 오른쪽 순서
     │    ├── 쉼표(,)로 구분
     │    └── 하나 이상의 여러 개를 목록으로 나열
     │         └── (예: "Noto Sans KR", "맑은 고딕", Helvetica, sans-serif)
     └── 브라우저의 선택 과정
          └── 사용할 수 있는 첫 번째 글꼴 선택
               └── (예: "맑은 고딕"이 사용 가능할 경우 화면에 표시)

구문

font-family 속성은 요소에 적용할 글꼴의 우선순위 목록을 지정하는 속성입니다.
이 속성은 특정 '글꼴 이름'과 '글꼴 종류'를 나열할 수 있습니다.

부연설명
글꼴 종류(generic font family)란 '실제 글꼴 이름'이 아닌, 글꼴을 디자인 스타일에 따라 분류한 계열(serif, sans-serif, monospace 등)입니다.

CSS 
/* 하나의 '글꼴 이름' */
font-family: "맑은 고딕"; /* 영문이 아닌 이름은 쌍따옴표나 홑따옴표로 감싸줌 */
font-family: "바탕";
font-family: consolas; /* 영문 단어일 경우 쌍따옴표나 홑따옴표 생략 가능 */
font-family: "Noto Sans KR"; /* 영문이더라도 하이픈 외에 띄어쓰기나 특수 문자가 포함되어 있으면
                                쌍따옴표나 홑따옴표로 감싸줌 */

/* '글꼴 이름' 목록 */
font-family: "Noto Sans KR", "맑은 고딕";

/* 하나의 '글꼴 종류' */
font-family: sans-serif; /* 글꼴 종류는 따옴표 없이 사용 */
font-family: serif;
font-family: monospace;

/*
 * '글꼴 이'름과 '글꼴 종류' 함께 지정하기
 * 
 * '글꼴 이름'을 우선순위에 따라 먼저 작성하고,
   반드시 마지막에 일반 '글꼴 종류'를 지정해야 함.
   이는 원하는 '글꼴 이름'이 우선적으로 선택되고,
   원하는 '글꼴 이름'이 사용 불가능한 경우에만 일반 '글꼴 종류'로 넘어가기 위함
*/

/* 하나의 '글꼴 이름'과 하나의 '글꼴 종류' */
font-family: "맑은 고딕", sans-serif;
font-family: "바탕", serif;
font-family: consolas, monospace;

/* '글꼴 이름' 목록과 '글꼴 종류' */
font-family: "Noto Sans KR", "맑은 고딕", Helvetica, sans-serif;

/* 전역 값 */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: revert-layer;
font-family: unset;

형식 정의

font-family 속성의 형식 정의
초깃값 브라우저에 따라 달라집니다.
적용 요소 모든 요소
상속 예
애니메이션 아니오

값

font-family 속성의 값
글꼴 이름 특정 글꼴의 이름입니다. (대소문자를 구분하지 않음)
  • 하이픈(-) 외에 띄어쓰기나 특수 문자가 포함되어 있으면 쌍따옴표나 홑따옴표로 감싸줍니다.
  • 영문이 아닌 이름은 무조건 쌍따옴표나 홑따옴표로 감싸주는 것을 권장합니다.
글꼴 종류 글꼴 종류(generic font family)란 '실제 글꼴 이름'이 아닌, 글꼴을 디자인 스타일에 따라 분류한 계열(serif, sans-serif, monospace 등)입니다. (대소문자를 구분하지 않음)
지정된 '글꼴 이름'을 사용할 수 없을 때 스타일 시트 작성자의 의도 중 일부를 보존하는 수단으로으로 지정합니다.
  • '글꼴 종류'는 반드시 글꼴 목록의 마지막 항목으로만 작성되어야 합니다.
  • '글꼴 종류' 문자열이 아닌 키워드입니다. 쌍따옴표나 홑따옴표로 감싸서는 안 됩니다.

유요한 글꼴 이름

다음의 경우는 유효한 글꼴 이름입니다.

CSS 
/* 띄어쓰기가 포함되어 있어 따옴표로 감싸줌 */
font-family: "compay font 2014", sans-serif;

/* 영문 단어일 경우 쌍따옴표나 홑따옴표 생략 가능하지만,
   따옴표로 감싸도 됨 */
font-family: "arial", sans-serif;

다음의 경우는 유효하지 않은 글꼴 이름입니다.

CSS 
/* 하이픈(-) 외에 띄어쓰기나 특수 문자가 포함되어 있으면
   쌍따옴표나 홑따옴표로 감싸야 함 */
font-family: test@foo, sans-serif;
font-family: compay font 2014, sans-serif;

/* 쉼표 구분 없음 */
font-family: "Noto Sans KR" "맑은 고딕", sans-serif;

글꼴 종류

글꼴 종류는 글꼴을 디자인 스타일에 따라 분류한 계열을 키워드로 지정합니다.
다음의 키워드가 정의되어 있습니다.

serif

글자와 기호를 이루는 획의 일부 끝이 돌출된 형태입니다.
특정 글꼴 이름으로는 "바탕", "Times New Roman" 등이 있습니다.

CSS 
font-family: serif;
실제 적용된 모습
sans-serif

획의 삐침이 없는 글씨체입니다.
특정 글꼴 이름으로는 "맑은 고딕", arial 등이 있습니다.

CSS 
font-family: sans-serif;
실제 적용된 모습
monospace

모든 문자의 너비는 동일하게 고정되어 있습니다. 종종 컴퓨터 코드 샘플을 렌더링하는 데 사용됩니다.
특정 글꼴 이름으로는 consolas 등이 있습니다.

CSS 
font-family: monospace;
실제 적용된 모습

아래의 HTML 태그들은 대부분의 브라우저에서 font-family 속성의 초깃값으로 monospace를 지정하고 있습니다.

cursive

필기체입니다.
특정 글꼴 이름으로는 "궁서", "Brush Script MT" 등이 있습니다.

CSS 
font-family: cursive;
실제 적용된 모습
fantasy

주로 장식적이거나 표현적인 글꼴로, 주로 캐릭터를 재밌게 표현한 장식용 글꼴입니다.
특정 글꼴 이름으로는 Curlz MT 등이 있습니다.

CSS 
font-family: fantasy;
실제 적용된 모습
system-ui

브라우저가 실행되는 플랫폼의 기본 사용자 인터페이스 글꼴에서 가져온 것입니다.

CSS 
font-family: system-ui;
실제 적용된 모습

system-ui를 사용하면 웹 콘텐츠가 브라우저가 실행되는 플랫폼의 기본 글꼴과 동일하기 때문에 통일된 글꼴을 제공할 수 있습니다.

ui-serif

브라우저가 실행되는 플랫폼의 기본 사용자 인터페이스 serif 글꼴에서 가져온 것입니다.

CSS 
font-family: ui-serif;
실제 적용된 모습

ui-serif는 적절한 시스템 글꼴이 없는 플랫폼에서는 적용되지 않을 것으로 예상됩니다.

ui-sans-serif

브라우저가 실행되는 플랫폼의 기본 사용자 인터페이스 sans-serif 글꼴에서 가져온 것입니다.

CSS 
font-family: ui-sans-serif;
실제 적용된 모습

ui-sans-serif는 적절한 시스템 글꼴이 없는 플랫폼에서는 적용되지 않을 것으로 예상됩니다.

ui-monospace

브라우저가 실행되는 플랫폼의 기본 사용자 인터페이스 monospace 글꼴에서 가져온 것입니다.

CSS 
font-family: ui-monospace;
실제 적용된 모습

ui-monospace는 적절한 시스템 글꼴이 없는 플랫폼에서는 적용되지 않을 것으로 예상됩니다.

ui-rounded

브라우저가 실행되는 플랫폼의 기본 사용자 인터페이스 둥근 모양의 글꼴에서 가져온 것입니다.

CSS 
font-family: ui-rounded;
실제 적용된 모습

ui-rounded는 적절한 시스템 글꼴이 없는 플랫폼에서는 적용되지 않을 것으로 예상됩니다.

emoji

이모지를 표현하기 위해 특별히 디자인된 글꼴입니다.

CSS 
font-family: emoji;
실제 적용된 모습

웹 페이지에서 이모지(이모티콘) 사용하기를 참조하세요.

fangsong

fangsong(仿宋 )은 중국어 간체 스크립트를 사용하여 중국어를 입력하기 위해 디자인된 글꼴입니다.

CSS 
font-family: fangsong;
실제 적용된 모습

fangsong은 브라우저가 실행되는 디바이스에 설치되어 있지 않으면 적용되지 않을 수 있습니다.

사용 팁

font-family 속성에 '글꼴 이름'을 지정할 때에는 항상 '글꼴 종류'를 마지막에 추가해 줄 것을 권장합니다.

이렇게 하면 브라우저가 정확한 '글꼴 이름'을 선택할 수 없을 경우
대체 글꼴로 마지막에 추가한 '글꼴 종류'에서 비슷한 스타일의 글꼴을 적용할 수 있기 때문입니다.

'글꼴 이름'만 지정했을 때와, 글꼴 이름 뒤에 '글꼴 종류'를 추가했을 때의 예시를 통해 차이를 명확히 보여드리겠습니다.

'글꼴 이름'만 지정한 경우
CSS 
font-family: "Nanum Gothic", Arial;

이 경우, 브라우저는 먼저 "Nanum Gothic"을 찾고, 사용할 수 없으면 Arial을 적용합니다. 만약 두 글꼴이 모두 없는 환경에서는 브라우저 기본 글꼴이 적용(font-family의 초깃값은 브라우저에 따라 달라집니다.)되므로, 의도한 스타일이 적용되지 않을 수 있습니다.

'글꼴 이름' 뒤에 '글꼴 종류'를 추가한 경우
CSS 
font-family: "Nanum Gothic", "Arial", sans-serif;

"Nanum Gothic", Arial두 글꼴이 모두 없는 경우에도 마지막에 지정된 sans-serif 종류의 글꼴로 대체되므로, 비슷한 스타일의 글꼴이 적용됩니다.

따라서 글꼴 이름을 지정할 때 항상 글꼴 종류를 마지막에 추가하면, 브라우저에서 사용할 수 있는 글꼴이 없을 때도 텍스트가 최대한 의도된 스타일에 가깝게 표시될 수 있습니다.

브라우저 호환성

font-family 속성의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
font-family 1 12 1 1
system-ui 56 79 92 11

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

font-family 속성의 명세서 사양
명세서 사양
font-family CSS Fonts Module Level 4
#font-family-prop

참고문헌

같이 보기