구글 폰트 적용하는 방법 in Vite

1. 연성 글꼴 다운로드

1. Google Fonts에 접속합니다.
2. YeonSung 글꼴을 검색한 뒤, "Download family" 버튼을 클릭하여 다운로드합니다.
3. 다운로드된 압축 파일을 해제하고 YeonSung-Regular.ttf 파일을 준비합니다.

=> public 폴더 내부에 fonts라는 폴더를 생성하여 font 폴더 하위에 다운로드받은 YeonSung-Regular.ttf 파일을 저장합니다.

2. 글꼴 파일을 프로젝트의 public 폴더에 저장

1. 프로젝트 디렉터리의 public/fonts 폴더에 YeonSung-Regular.ttf 파일을 복사합니다.
2. 최종 폴더 구조:

프로젝트_폴더/
├── public/
│   ├── fonts/
│   │   └── YeonSung-Regular.ttf
├── src/
│   ├── index.css
│   └── ...
├── tailwind.config.js
└── ...

3. TailwindCSS 설정 파일 업데이트

1. 프로젝트 루트에 있는 tailwind.config.js 파일을 엽니다.
2. fontFamily 설정에 YeonSung 폰트를 추가합니다.

/** @type {import('tailwindcss').Config} */
import defaultTheme from 'tailwindcss/defaultTheme';

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        yeonsung: ['YeonSung', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
};

4. 글꼴을 @font-face로 정의

1. src/index.css 파일을 열어 아래 내용을 추가합니다.

@font-face {
  font-family: 'YeonSung';
  src: url('/fonts/YeonSung-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

url('/fonts/YeonSung-Regular.ttf') 경로가 public/fonts를 기준으로 올바른지 확인합니다.

 

5. 컴포넌트에서 Tailwind 유틸리티 사용

1. 폰트를 적용하려는 컴포넌트에서 font-yeonsung 클래스를 사용합니다.
2. 예시:

export default function App() {
  return (
    <div className="font-yeonsung text-3xl">
      이 텍스트는 연성 글꼴로 표시됩니다.
    </div>
  );
}

---

만약, 여기서 여러 개의 글꼴을 다운로드 받아서 적용하려고 한다면?

연성(YeonSung) 폰트와 나눔스퀘어(NanumSquare) 폰트를 추가로 적용하는 경우

1. 폰트 파일 준비
   • 연성 폰트는 이미 public/fonts/YeonSung-Regular.ttf로 저장되어 있다고 가정합니다.
   • 나눔스퀘어 폰트 파일 NanumSquare-Regular.ttf와 NanumSquare-Bold.ttf를 다운로드하여 public/fonts 폴더에 저장합니다.
   최종 폴더 구조:

public/
├── fonts/
│   ├── YeonSung-Regular.ttf
│   ├── NanumSquare-Regular.ttf
│   └── NanumSquare-Bold.ttf

2. @font-face 정의 (index.css)

• src/index.css에 각 폰트를 정의합니다.

@font-face {
  font-family: 'YeonSung';
  src: url('/fonts/YeonSung-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NanumSquare';
  src: url('/fonts/NanumSquare-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'NanumSquare';
  src: url('/fonts/NanumSquare-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

3. TailwindCSS 설정 수정 (tailwind.config.js)

• fontFamily 설정에 두 폰트를 추가합니다.

/** @type {import('tailwindcss').Config} */
import defaultTheme from 'tailwindcss/defaultTheme';

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        yeonsung: ['YeonSung', ...defaultTheme.fontFamily.sans],
        nanumsquare: ['NanumSquare', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
};

4. 컴포넌트에서 폰트 사용

• font-yeonsung과 font-nanumsquare 클래스를 사용하여 각각의 폰트를 적용할 수 있습니다.

export default function App() {
  return (
    <div>
      <h1 className="font-yeonsung text-4xl">
        이 텍스트는 연성 글꼴입니다.
      </h1>
      <p className="font-nanumsquare text-lg font-bold">
        이 텍스트는 나눔스퀘어 볼드 글꼴입니다.
      </p>
      <p className="font-nanumsquare text-lg font-normal">
        이 텍스트는 나눔스퀘어 레귤러 글꼴입니다.
      </p>
    </div>
  );
}