CSS font-family: 글꼴

CSS font-family 속성은 선택한 요소에 적용할 글꼴 가족(활자 가족)을 지정합니다.

pre {
  font-family: sans-serif;
  /* font-family: 'Do Hyeon', sans-serif; */
  /* font-family: serif; */
  /* font-family: monospace; */
}

pre {
  text-align: center;
}

<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet" />

<pre>
내 그대를 생각함은
항상 그대가 앉아 있는 배경에서
해가 지고 바람이 부는 일처럼 사소한 일 일것이나
언젠가 그대가
한없이 괴로움 속을 헤매일 때에
오랫동안 전해 오던 그 사소함으로
그대를 불러보리라
</pre>

font-family의 값은 쉼표로 구분하는 목록으로, 브라우저는 그 중에서 사용자의 컴퓨터에 이미 설치된, 또는 @font-face @규칙을 통해 다운로드 받을 수 있는 가장 앞쪽 글꼴 가족을 선택합니다.

값 목록의 맨 마지막에는 항상 글꼴 범주명을 하나 추가하세요. 지정한 모든 글꼴을 사용할 수 없는 상황이 닥쳐도, 어느정도 적합한 대체 글꼴이 보여집니다.

font-family 목록에서 사용할 글꼴 가족을 선택하는 과정은 전체 텍스트가 아닌 각각의 문자별로 수행하기 때문에, 사용자 컴퓨터에 설치된 글꼴을 찾더라도 멈추는 것이 아닙니다. 즉, 어떤 글꼴이 특정 문자를 포함하고 있지 않으면 그 다음 글꼴로 다시 시도합니다. 어떤 글꼴 가족의 특정 스타일이나 크기, 변형을 사용할 수 없는 경우도 최종 결과에 영향을 줍니다.

구문

/* 글꼴 가족 이름과 범주명 */
font-family: Nanum Gothic Coding, sans-serif;

/* 글꼴 범주명만 */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

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

font-family는 하나 이상의 글꼴 가족 이름을 쉼표로 구분해서 지정할 수 있습니다. 각각의 글꼴 가족 이름은 <family-name>과 <generic-name>을 사용합니다.

값

<family-name>

글꼴 가족의 이름입니다. 위의 구문 예제에서는 “Nanum Gothic Coding”이 글꼴 가족의 이름입니다.

<generic-name>

<generic-name>은 세리프와 산세리프와 같이 글꼴의 범주명으로, 직접 지정한 글꼴들 중 무엇도 사용할 수 없는 경우에도 스타일을 어느정도 보존하기 위한 방안입니다. 범주명은 키워드 값으로서 따옴표로 감싸서는 안되며 항상 목록의 마지막에 와야 합니다. 사용할 수 있는 값은 다음과 같습니다.

serif

세리프는 획의 끝을 붓으로 그린 것처럼 장식한 글꼴로, 한글 바탕체에 해당합니다. 나눔명조, 본명조, 서울한강체 등이 있습니다.

sans-serif

산세리프는 장식 없는 글꼴로, 한글 돋움체에 해당합니다. 나눔고딕, 본고딕, 서울남산체 등이 있습니다.

monospace

고정폭 글꼴입니다. 나눔고딕코딩, D2 Coding 등이 있습니다.

cursive

이탤릭보다 더 눈에 띄는 필기체의 성격을 가진 글꼴입니다. 영어로 확인하세요:

Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces.

fantasy

시각적으로 흥미를 끌 수 있는 요소를 첨가한 글꼴입니다. 영어로 확인하세요:

Fantasy fonts are primarily decorative fonts that contain playful representations of characters.

system-ui

사용자 플랫폼의 기본 인터페이스 글꼴을 사용합니다. 전세계의 활자 사용법에는 큰 차이가 있으므로, system-ui는 위의 5개 범주로 깔끔하게 분류할 수 없는 글꼴을 위해 제공됩니다.

ui-serif

사용자 인터페이스의 기본 세리프 글꼴을 사용합니다.

ui-sans-serif

사용자 인터페이스의 기본 산세리프 글꼴을 사용합니다.

ui-monospace

사용자 인터페이스의 기본 고정폭 글꼴을 사용합니다.

ui-rounded

사용자 인터페이스의 기본 둥근 글꼴을 사용합니다.

math

아래 첨자와 위 첨자(ax² + bx + c), 여러 줄을 차지하는 괄호, 중첩 표현식, 이중 선 문자(ℕ, ℤ, ℚ, …)처럼 수학 표현을 나타내는 것에 최적화된 글꼴을 사용합니다.

emoji

이모지 📕💻 렌더링을 위해 디자인된 글꼴을 사용합니다.

fangsong

중문 글꼴 중 명조와 해서를 혼합한 듯한 글꼴을 사용합니다. 보통 중국 공문에서 볼 수 있습니다.

유효한 글꼴 가족 이름

글꼴 가족 이름은 한 개 이상의 문자열(따옴표로 감싸짐) 또는 식별자(따옴표 없음)로 지정해야 합니다. 그리고 식별자는 문장 부호나 숫자 등으로 시작할 수 없으므로, 글꼴 가족 이름을 따옴표로 감싸지 않은 경우 문장 부호와 숫자는 반드시 이스케이프를 해줘야 합니다.

실수를 방지하기 위해, 하이픈을 제외한 문장 부호나 숫자, 공백을 포함한 글꼴 가족 이름을 지정할 땐 항상 따옴표로 감싸주는 것을 추천합니다.

다음은 유효한 선언의 예시입니다.

font-family: "Noto Sans KR", sans-serif;
font-family: "Seoul 1980", sans-serif;

그리고 유효하긴 하지만 추천하지 않는 방법입니다. 따옴표로 감싸주세요.

font-family: Noto Sans KR, sans-serif;

마지막으로 유효하지 않은 예제입니다.

font-family: Seoul 1980, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

명세

• CSS Fonts Module Level 4

브라우저 호환성

같이 보기

• 글씨 스타일: font-style
• 글씨 굵기: font-weight