컨텐츠로 이동
Astro Astro

사용자 정의 글꼴 사용

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

로컬 글꼴 파일 사용

이 예시는 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 프로젝트는 Google Fonts 및 기타 오픈 소스 글꼴 사용을 단순화합니다. 사용하려는 글꼴을 설치할 수 있는 npm 모듈을 제공합니다.

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

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

    Terminal window
    npm install @fontsource/twinkle-star

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

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

    src/layouts/BaseLayout.astro
    ---
    import '@fontsource/twinkle-star';
    ---

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

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

Tailwind에 글꼴 등록

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

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

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

  2. tailwind.config.cjs에 서체 이름을 추가하세요.

    이 예시에서는 InterVariable 및 Inter를 sans-serif 글꼴 스택에 추가하고, Tailwind CSS의 기본 대체 글꼴을 사용합니다.

    tailwind.config.cjs
    const defaultTheme = require("tailwindcss/defaultTheme");
    

    module.exports = {
      // ...
      theme: {
        extend: {
          fontFamily: {
            sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
          },
        },
      },
      // ...
    };

    이제 프로젝트의 모든 sans-serif 글자 (Tailwind의 기본값)는 선택한 글꼴을 사용하고 font-sans 클래스도 Inter 글꼴을 적용합니다.

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

더 많은 자료