CSS @font-face font-weight: 글꼴 굵기 지정

CSS @font-face @규칙의 font-weight 서술자는 @font-face로 선언하는 글꼴의 굵기를 지정합니다. CSS 규칙이 글씨 굵기를 지정할 때, 브라우저는 이 서술자를 참고해 적절한 굵기의 글꼴을 선택합니다.

많은 경우, 개발자는 한 개의 글꼴 가족에 속한 다양한 굵기의 글꼴을 사용해야 합니다. 전통적인 ‘정적’ 글꼴에서는 한 개의 글꼴 파일이 글꼴 가족에 속한 특정 굵기와 스타일만 제공합니다. 예컨대 “Helvetica bold italic”을 생각해보면 됩니다. font-weight 속성이 특정 굵기를 지정할 때 적절히 보여줄 얇은, 보통, 굵은, 매우 굵은 글꼴을 사용하려면 @font-face @규칙을 같은 글꼴 가족 이름 (같은 font-face 서술자)에 다른 font-weight 서술자로 여러 개 정의하세요. 예제를 참고하세요.

여러 굵기에서 하나의 글꼴을 사용하려면 서술자에 두 개의 값을 공백으로 구분해서 지정하세요. 예를 들어 font-weight: 400 600 글꼴을 정의한 경우, CSS 규칙에서 font-weight: 450 또는 font-weight: 550 사용 시 이 글꼴을 사용하게 됩니다. 이때, 글꼴이 정적 글꼴이라면 450과 550에서 모두 동일하게 보이고, 가변 글꼴이라면 550에서 더 굵게 보일 것입니다.

구문

@font-face {
  /* 단일 값 */
  font-weight: normal;
  font-weight: bold;
  font-weight: 400;

  /* 범위 설정 */
  font-weight: normal bold;
  font-weight: 300 500;
}

값

font-weight 서술자는 다음 값 중 하나를 사용해 지정할 수 있습니다.

• auto 키워드
• 하나의 <font-weight-absolute> 값
• 두 개의 공백 구분 <font-weight-absolute> 값

각각의 <font-weight-absolute> 값은 다음 중 하나입니다.

normal

기본 굵기입니다. 400과 같습니다.

bold

굵은 글꼴입니다. 700과 같습니다.

<number>

1 이상 1000 이하의 <number> 값입니다. 높을 수록 더 굵은 글꼴을 나타냅니다.100 단위로 끊어지는 값들에는 자주 쓰이는 별칭이 있습니다. 아래의 자주 쓰이는 굵기 이름에서 확인하세요.

자주 쓰이는 굵기 이름

100부터 900까지의 숫자 굵기는 대략 다음과 같은 이름에 대응합니다. (OpenType 명세도 확인하세요)

가변 글꼴

대부분의 글꼴은 자주 쓰이는 굵기 이름에 해당하는 굵기만 가지고 있습니다. 그러나 가변 글꼴은 특정 굵기만 지원하는 것에서 벗어나서 굵기의 범위를 지원합니다. 따라서 디자이너가 글씨의 굵기를 훨씬 더 자세하게 조절할 수 있습니다.

TrueType과 OpenType 가변 글꼴은 “wght” 바리에이션을 사용해 가변 굵기를 구현합니다.

접근성

font-weight가 100 또는 200인 얇은 텍스트는 저시력 사용자가 읽기 어려울 수 있습니다.

• Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0

예제

글꼴 가족의 보통 글꼴과 굵은 글꼴 정의하기

이 예제에서는 Pretendard 글꼴 가족의 보통 굵기와 굵은 굵기 두 개 글꼴을 각각의 @font-face @규칙으로 정의합니다. 이때 각자의 font-weight 서술자를 글꼴의 굵기에 맞춰 지정합니다.

선언 후에는 CSS 규칙에서 Pretendard 글꼴 가족의 보통 굵기와 굵은 굴기 중 하나를 font-weight 속성으로 선택할 수 있습니다.

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
}

body {
  font-family: 'Pretendard', sans-serif;
  font-size: 1.25rem;
}

p.normal {
  font-weight: normal;
}

p.bold {
  font-weight: bold;
}

<p class="normal">프리텐다드 'normal' 굵기</p>
<p class="bold">프리텐다드 'bold' 굵기</p>

가변 글꼴의 굵기 범위 지정하기

이 예제에서는 font-weight 서술자로 가변 글꼴의 굵기 범위를 제한합니다.

이번에는 한 개의 @font-face를 사용해 Pretendard 글꼴 가족의 가변 글꼴을 정의합니다. 이때 font-weight: 300 700을 사용해서 최소와 최대 굵기를 제한합니다. Pretendard를 사용하는 CSS 규칙에서 font-weight를 300 미만 또는 700 초과로 지정하면 각각 300과 700으로 조정됩니다.

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 300 700;
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2');
}

p {
  font-family: 'Pretendard', sans-serif;
  font-size: 1.25rem;
}
p:first-of-type {
  font-weight: 300;
}
p:last-of-type {
  font-weight: 700;
}

<p>프리텐다드 '300' 굵기</p>
<p id="target">프리텐다드 가변 굵기</p>
<p>프리텐다드 '700' 굵기</p>

<label for="font-weight">글꼴 굵기:</label>
<input id="font-weight" type="range" min="100" max="900" value="400">

const target = document.querySelector('#target')
const input = document.querySelector('#font-weight')

input.addEventListener('input', () => {
  target.style.fontWeight = input.value
})

명세

• CSS Fonts Module Level 4

브라우저 호환성