사용자 정의 글꼴 사용

이 안내서는 프로젝트에 웹 글꼴을 추가하고 컴포넌트에서 사용하는 방법을 설명합니다.

로컬 글꼴 파일 사용

이 예시는 DistantGalaxy.woff 글꼴 파일을 사용하여 사용자 정의 글꼴을 추가하는 방법을 보여줍니다.

public/fonts/ 디렉터리에 글꼴 파일을 추가하세요.

CSS에 다음 @font-face 문을 추가하세요. CSS는 전역 .css 파일이거나, <style is:global> 블록이거나, 글꼴을 사용할 특정 레이아웃이나 컴포넌트의 <style> 블록일 수도 있습니다.

/* 사용자 정의 글꼴 모음을 등록하고 브라우저에 해당 글꼴 모음을 찾을 수 있는 위치를 알려주세요. */
@font-face {
  font-family: 'DistantGalaxy';
  src: url('/fonts/DistantGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face 문의 font-family 값을 사용하여 컴포넌트나 레이아웃의 요소에 스타일을 지정하세요. 이 예시에서 <h1> 제목에는 사용자 정의 글꼴이 적용되지만 <p> 단락에는 적용되지 않습니다.
src/pages/example.astro
```
---
---

<h1>머나먼 은하계에서...</h1>

<p>사용자 정의 글꼴을 사용해 제목을 멋지게 꾸밀 수 있습니다!</p>

<style>
h1 {
  font-family: 'DistantGalaxy', sans-serif;
}
</style>
```

Fontsource 사용

Fontsource 프로젝트는 Google Fonts 및 기타 오픈 소스 글꼴 사용을 단순화합니다. 사용하려는 글꼴을 설치할 수 있는 npm 모듈을 제공합니다.

Fontsource 카탈로그에서 사용하고 싶은 글꼴을 찾아보세요. 이 예시에서는 Twinkle Star를 사용합니다.
선택한 글꼴에 대한 패키지를 설치합니다.
- npm
- pnpm
- Yarn
터미널 창
npm install @fontsource/twinkle-star
터미널 창
pnpm add @fontsource/twinkle-star
터미널 창
yarn add @fontsource/twinkle-star
Fontsource 웹사이트의 각 글꼴 페이지에 있는 “Quick Installation” 섹션에서 올바른 패키지 이름을 찾을 수 있습니다. 패키지 이름은 @fontsource/ 또는 @fontsource-variable/로 시작하고 그 뒤에 글꼴 이름이 있습니다.
글꼴을 사용하려는 컴포넌트에서 글꼴 패키지를 가져옵니다. 일반적으로 사이트 전체에서 글꼴을 사용할 수 있도록 공통 레이아웃 컴포넌트에서 이 작업을 수행할 수 있습니다.

가져오기는 글꼴을 설정하는 데 필요한 @font-face 규칙을 자동으로 추가합니다.
src/layouts/BaseLayout.astro
```
---
import '@fontsource/twinkle-star';
---
```
Fontsource 페이지의 body 예시에 나와있는 것처럼 font-family 값으로 글꼴의 이름을 사용하세요. 이는 Astro 프로젝트에서 CSS를 작성할 수 있는 모든 곳에서 작동합니다.
```
h1 {
  font-family: "Twinkle Star", cursive;
}
```

웹사이트의 렌더링 시간을 최적화하기 위해 초기 페이지 표시에 필요한 글꼴을 미리 로드할 수 있습니다. 자세한 내용과 사용법은 글꼴 사전 로드에 대한 Fontsource 가이드를 참조하세요.

Tailwind에 글꼴 등록

Tailwind 통합을 사용하는 경우 이 페이지의 이전 방법 중 하나에 약간의 수정을 거쳐 글꼴을 설치할 수 있습니다. 로컬 글꼴에 대한 @font-face 문을 추가하거나 Fontsource의 import 전략을 사용하여 글꼴을 설치할 수 있습니다.

Tailwind에 글꼴을 등록하려면 다음 단계를 따르세요.

위 안내 중 하나를 따르되, CSS에 font-family를 추가하는 마지막 단계는 건너뛰세요.
tailwind.config.mjs에 서체 이름을 추가하세요.

이 예시에서는 Inter를 sans-serif 글꼴 스택에 추가하고, Tailwind CSS의 기본 대체 글꼴을 사용합니다.
tailwind.config.mjs
```
import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
}
```
이제 프로젝트의 모든 sans-serif 글자 (Tailwind의 기본값)는 선택한 글꼴을 사용하고 font-sans 클래스도 Inter 글꼴을 적용합니다.

자세한 내용은 사용자 정의 글꼴 모음 추가에 대한 Tailwind 문서를 확인하세요.

더 많은 자료

MDN의 웹 글꼴 안내서에서 웹 글꼴이 작동하는 방식을 알아보세요.
Font Squirrel의 웹 글꼴 생성기를 사용하여 글꼴에 맞는 CSS를 생성하세요.

기여하기

커뮤니티