사용자 정의 글꼴 사용

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

로컬 글꼴 파일 사용

섹션 제목: 로컬 글꼴 파일 사용

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

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

2. 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;
   }

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

   src/pages/example.astro

   ---
   ---
   
   <h1>머나먼 은하계에서...</h1>
   
   <p>사용자 정의 글꼴을 사용해 제목을 멋지게 꾸밀 수 있습니다!</p>
   
   <style>
   h1 {
     font-family: 'DistantGalaxy', sans-serif;
   }
   </style>

Fontsource 사용

섹션 제목: Fontsource 사용

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

1. Fontsource 카탈로그에서 사용하고 싶은 글꼴을 찾아보세요. 이 예시에서는 Twinkle Star를 사용합니다.

2. 선택한 글꼴에 대한 패키지를 설치합니다.

   npm

   npm install @fontsource/twinkle-star

   pnpm

   pnpm add @fontsource/twinkle-star

   Yarn

   yarn add @fontsource/twinkle-star

   팁

   Fontsource 웹사이트의 각 글꼴 페이지에 있는 “Quick Installation” 섹션에서 올바른 패키지 이름을 찾을 수 있습니다. 패키지 이름은 @fontsource/ 또는 @fontsource-variable/로 시작하고 그 뒤에 글꼴 이름이 있습니다.

3. 글꼴을 사용하려는 컴포넌트에서 글꼴 패키지를 가져옵니다. 일반적으로 사이트 전체에서 글꼴을 사용할 수 있도록 공통 레이아웃 컴포넌트에서 이 작업을 수행할 수 있습니다.

   가져오기는 글꼴을 설정하는 데 필요한 @font-face 규칙을 자동으로 추가합니다.

   src/layouts/BaseLayout.astro

   ---
   import '@fontsource/twinkle-star';
   ---

4. Fontsource 페이지의 body 예시에 나와있는 것처럼 font-family 값으로 글꼴의 이름을 사용하세요. 이는 Astro 프로젝트에서 CSS를 작성할 수 있는 모든 곳에서 작동합니다.

   h1 {
     font-family: "Twinkle Star", cursive;
   }

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

Tailwind에 글꼴 등록

섹션 제목: Tailwind에 글꼴 등록

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

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

1. 위 안내 중 하나를 따르되, CSS에 font-family를 추가하는 마지막 단계는 건너뛰세요.

2. 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를 생성하세요.