| title | description | i18nReady |
|---|---|---|
사용자 정의 글꼴 사용 |
Astro 웹사이트에 사용자 정의 서체를 추가하려고 하시나요? Fontsource를 통해 Google Fonts를 사용하거나 원하는 글꼴을 추가하세요. |
true |
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; import { Steps } from '@astrojs/starlight/components'
이 안내서는 프로젝트에 웹 글꼴을 추가하고 컴포넌트에서 사용하는 방법을 설명합니다.
이 예시는 DistantGalaxy.woff 글꼴 파일을 사용하여 사용자 정의 글꼴을 추가하는 방법을 보여줍니다.
```css
/* 사용자 정의 글꼴 모음을 등록하고 브라우저에 해당 글꼴 모음을 찾을 수 있는 위치를 알려주세요. */
@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>단락에는 적용되지 않습니다.--- --- <h1>머나먼 은하계에서...</h1> <p>사용자 정의 글꼴을 사용해 제목을 멋지게 꾸밀 수 있습니다!</p> <style> h1 { font-family: 'DistantGalaxy', sans-serif; } </style>
Fontsource 프로젝트는 Google Fonts 및 기타 오픈 소스 글꼴 사용을 단순화합니다. 사용하려는 글꼴을 설치할 수 있는 npm 모듈을 제공합니다.
1. [Fontsource 카탈로그](https://fontsource.org/)에서 사용하고 싶은 글꼴을 찾아보세요. 이 예시에서는 [Twinkle Star](https://fontsource.org/fonts/twinkle-star)를 사용합니다. 2. 선택한 글꼴에 대한 패키지를 설치합니다.<PackageManagerTabs>
<Fragment slot="npm">
```shell
npm install @fontsource/twinkle-star
```
</Fragment>
<Fragment slot="pnpm">
```shell
pnpm add @fontsource/twinkle-star
```
</Fragment>
<Fragment slot="yarn">
```shell
yarn add @fontsource/twinkle-star
```
</Fragment>
</PackageManagerTabs>
:::tip
Fontsource 웹사이트의 각 글꼴 페이지에 있는 "Quick Installation" 섹션에서 올바른 패키지 이름을 찾을 수 있습니다. 패키지 이름은 `@fontsource/` 또는 `@fontsource-variable/`로 시작하고 그 뒤에 글꼴 이름이 있습니다.
:::
-
글꼴을 사용하려는 컴포넌트에서 글꼴 패키지를 가져옵니다. 일반적으로 사이트 전체에서 글꼴을 사용할 수 있도록 공통 레이아웃 컴포넌트에서 이 작업을 수행할 수 있습니다.
가져오기는 글꼴을 설정하는 데 필요한
@font-face규칙을 자동으로 추가합니다.--- import '@fontsource/twinkle-star'; ---
-
Fontsource 페이지의
body예시에 나와있는 것처럼font-family값으로 글꼴의 이름을 사용하세요. 이는 Astro 프로젝트에서 CSS를 작성할 수 있는 모든 곳에서 작동합니다.h1 { font-family: "Twinkle Star", cursive; }
Tailwind 통합을 사용하는 경우 이 페이지의 이전 방법 중 하나에 약간의 수정을 거쳐 글꼴을 설치할 수 있습니다. 로컬 글꼴에 대한 @font-face 문을 추가하거나 Fontsource의 import 전략을 사용하여 글꼴을 설치할 수 있습니다.
Tailwind에 글꼴을 등록하려면 다음 단계를 따르세요.
1. 위 안내 중 하나를 따르되, CSS에 `font-family`를 추가하는 마지막 단계는 건너뛰세요. 2. `tailwind.config.mjs`에 서체 이름을 추가하세요.이 예시에서는 `Inter`를 sans-serif 글꼴 스택에 추가하고, Tailwind CSS의 기본 대체 글꼴을 사용합니다.
```js title="tailwind.config.mjs" ins={1,8-10}
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를 생성하세요.