Font Family

​Basic usage

​폰트 패밀리 설정

폰트 패밀리 유틸리티를 사용해 텍스트의 서체를 조절할 수 있습니다.

<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>

​Applying conditionally

​호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:font-serif 를 사용하면 font-serif 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<p class="font-sans hover:font-serif">
  <!-- ... -->
</p>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

​브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:font-serif를 사용하면 중간 화면 크기 이상에서만 font-serif 유틸리티를 적용할 수 있습니다.

<p class="font-sans md:font-serif">
  <!-- ... -->
</p>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.

​Using custom values

​테마 커스터마이징

기본적으로 Tailwind는 세 가지 폰트 패밀리 유틸리티를 제공합니다: 크로스 브라우저 sans-serif 스택, 크로스 브라우저 serif 스택, 그리고 크로스 브라우저 monospaced 스택입니다. 여러분은 Tailwind 설정 파일의 theme.fontFamily 섹션을 수정하여 이를 변경하거나 추가, 제거할 수 있습니다.

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['ui-sans-serif', 'system-ui', ...],
      'serif': ['ui-serif', 'Georgia', ...],
      'mono': ['ui-monospace', 'SFMono-Regular', ...],
      'display': ['Oswald', ...],
      'body': ['"Open Sans"', ...],
    }
  }
}

폰트 패밀리는 배열 형태로 지정하거나 쉼표로 구분된 문자열로 지정할 수 있습니다:

{
  // 배열 형식:
  'sans': ['Helvetica', 'Arial', 'sans-serif'],

  // 쉼표로 구분된 형식:
  'sans': 'Helvetica, Arial, sans-serif',
}

Tailwind는 폰트 이름을 자동으로 이스케이프하지 않습니다. 유효하지 않은 식별자를 포함한 폰트를 사용할 경우, 따옴표로 감싸거나 유효하지 않은 문자를 이스케이프해야 합니다.

{
  // 작동하지 않음:
  'sans': ['Exo 2', ...],

  // 따옴표 추가:
  'sans': ['"Exo 2"', ...],

  // ...또는 공백 이스케이프:
  'sans': ['Exo\\ 2', ...],
}

다른 웹 프로젝트와 마찬가지로, 사용 중인 커스텀 폰트를 브라우저가 로드할 수 있도록 CSS에 필요한 @font-face 또는 @import 규칙을 포함해야 합니다:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/Roboto.woff2) format('woff2');
  }
}

기본 테마를 커스터마이징하는 방법에 대해 더 알아보려면 테마 커스터마이징 문서를 참고하세요.

​기본 폰트 설정 제공하기

프로젝트에서 커스텀 폰트를 설정할 때, [fontFamilies, { fontFeatureSettings, fontVariationSettings }] 형태의 튜플을 사용해 각 폰트에 대한 기본 font-feature-settings와 font-variation-settings를 선택적으로 제공할 수 있습니다.

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        '"Inter var", sans-serif',
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32'
        },
      ],
    },
  },
}

​임의 값

테마에 포함시키기 어려운 font-family 값을 일회성으로 사용해야 한다면, 대괄호를 사용해 임의의 값으로 속성을 즉석에서 생성할 수 있습니다.

<p class="font-['Open_Sans']">
  <!-- ... -->
</p>

임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.

​기본 폰트 커스터마이징

편의를 위해 Preflight는 html 엘리먼트의 폰트 패밀리를 여러분이 설정한 sans 폰트와 일치하도록 설정합니다. 따라서 프로젝트의 기본 폰트를 변경하는 한 가지 방법은 fontFamily 설정에서 sans 키를 커스터마이징하는 것입니다:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['"Proxima Nova"', ...defaultTheme.fontFamily.sans],
      },
    }
  }
}

또한 커스텀 기본 스타일을 추가하여 font-family 속성을 명시적으로 설정함으로써 프로젝트에서 사용되는 기본 폰트를 커스터마이징할 수도 있습니다:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: "Proxima Nova", system-ui, sans-serif;
  }
}

이 방법은 폰트 패밀리 유틸리티를 다른 이름으로 커스터마이징했고, 프로젝트에서 font-sans 유틸리티를 사용하지 않으려는 경우에 가장 적합합니다.