폰트 패밀리

폰트 패밀리 (Font Family)

요소에 적용할 글꼴(font family)을 정해 주는 유틸리티예요. 산세리프(sans-serif), 세리프(serif), 모노스페이스(monospace) 등 여러 기본 글꼴 스택을 손쉽게 바꿔 쓸 수 있어요.

출처: 문서

본문

클래스 & 스타일 (Class Styles)

font-sans font-family: var(--font-sans); /* -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */

font-serif font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */

font-mono font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */

font-(family-name:<custom-property>) font-family: var(<custom-property>);

font-[<value>] font-family: <value>;

기본 예제 (Basic example)

font-sans, font-mono 같은 유틸리티를 사용해 요소의 글꼴 패밀리를 설정할 수 있어요.

font-sans The quick brown fox jumps over the lazy dog.

font-serif The quick brown fox jumps over the lazy dog.

font-mono The quick brown fox jumps over the lazy dog.

<p class="font-sans ...">The quick brown fox ...</p><p class="font-serif ...">The quick brown fox ...</p><p class="font-mono ...">The quick brown fox ...</p>

커스텀 값 사용하기 (Using a custom value)

font-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 글꼴 패밀리를 설정할 수 있어요.

<p class="font-[Open_Sans] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 변수를 쓸 때는 font-(family-name:<custom-property>) 문법을 사용할 수도 있어요.

<p class="font-(family-name:--my-font) ...">
  Lorem ipsum dolor sit amet...
</p>

이것은 font-[family-name:var(<custom-property>)]의 줄임 표현이에요. var() 함수를 자동으로 추가해 주기 때문에 훨씬 편리하죠.

반응형 디자인 (Responsive design)

font-family 유틸리티에 md: 같은 브레이크포인트 variant를 붙이면 중간(medium) 화면 크기 이상에서만 유틸리티를 적용할 수 있어요.

<p class="font-sans md:font-serif ...">
  Lorem ipsum dolor sit amet...
</p>

variant 사용에 대해 더 자세히 알고 싶다면 variants 문서를 확인해 보세요.

테마 커스터마이징 (Customizing your theme)

--font-* 테마 변수를 사용하면 프로젝트의 글꼴 패밀리 유틸리티를 커스터마이즈할 수 있어요.

@theme {
  --font-display: "Oswald", sans-serif;
}

이제 마크업에서 font-display 유틸리티를 사용할 수 있어요.

<div class="font-display">
  <!-- ... -->
</div>

폰트 패밀리에 기본 font-feature-settings와 font-variation-settings 값을 제공할 수도 있어요.

@theme {
  --font-display: "Oswald", sans-serif;
  --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --font-display--font-variation-settings: "opsz" 32;
}

필요하다면 @font-face at-rule을 사용해 커스텀 폰트를 로드할 수 있어요.

@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/fonts/Oswald.woff2") format("woff2");
}

Google Fonts 같은 서비스에서 폰트를 로드한다면, @import를 CSS 파일의 맨 위에 두는 것을 잊지 마세요.

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
@import "tailwindcss";
@theme {
  --font-roboto: "Roboto", sans-serif;
}

브라우저는 @import 문이 다른 규칙들보다 앞에 와야 한다고 요구해요. 그래서 URL import는 컴파일된 CSS에 인라인되는 @import "tailwindcss" 같은 import보다 위쪽에 있어야 해요.

테마 커스터마이징에 대해 더 자세히 알고 싶다면 theme 문서를 확인해 보세요.

폰트 패밀리