Tailwind CSS 커스텀 폰트 등록하기

이번 포스팅에서는 CSS 프레임워크인 Tailwind CSS에서 커스텀 폰트를 선택해 등록하는 방법을 다룬다.

1. 커스텀 폰트 찾기

프런트엔드 개발을 하다 보면 밋밋한 기본 폰트 대신 개성 있는 폰트를 적용하고 싶을 때가 있다.
눈누(https://noonnu.cc/) 는 다양한 폰트를 쉽게 찾을 수 있는 유용한 서비스다.
적용하고 싶은 폰트를 눈누에서 발견했으면 웹폰트로 사용 부분을 복사한다.

2. 폰트 등록하기

다음은 전역 CSS파일에 앞서 복사한 '웹폰트로 사용'의 @font_face를 붙여 넣는다.
전역 CSS파일은 global.css, tailwind.css, application.css 등 프로젝트 컨벤션에 따라 다르니 각자 확인 해야 한다.
나는 Remix 프레임워크로 개발 중이고 Tailwind CSS를 사용하고 있기 때문에 다른 CSS파일은 필요하지 않다.
오직 TailwindCSS를 초기화하기 위한 app/tailwind.css 라는 파일만 전역적으로 관리하고 있다.
따라서 아래와 같이 폰트를 등록해 주었다.

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "NanumBarunpen";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumBarunpen.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "EarlyFontDiary";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_220508@1.0/EarlyFontDiary.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}

3. Tailwind Config에 폰트 설정하기

앞서 등록한 폰트를 사용하려면 tailwind.config.ts 또는 tailwind.config.js 파일에 폰트 설정을 추가해야한다.
아래와 같이 theme.extend.fontFamily에 사용할 폰트를 정의하면 폰트를 페이지에 적용할 수 있다.

폰트로 설정하는 방법에는 기본 폰트, 커스텀 폰트 크게 2가지가 있다.
기본 폰트로 등록하면 별다른 설정 없이 웹 페이지의 텍스트가 등록한 폰트로 출력된다.
커스텀 폰트로 등록하면 폰트가 필요한 상황에 className으로 font-커스텀폰트이름 을 입력하면 사용할 수 있다.

sans 와 diary는 각각 기본 폰트와 커스텀 폰트를 설정하는 예시이다.
참고로 tailwind.config.ts에 추가하는 설정들은 실행 중인 서버를 종료하고 npm run dev , yarn dev 등의 명령어로 서버를 재실행해야 적용된다.

import type { Config } from "tailwindcss";
import defaultTheme from "tailwindcss/defaultTheme";

export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["NanumBarunpen", ...defaultTheme.fontFamily.sans],
        diary: ["EarlyFontDiary"],
      },
    },
  },
  plugins: [],
} satisfies Config;

3.1. 기본 폰트 설정하기

sans 는 Tailwind에서 default로 사용하는 font-family이다.
앞서 확인한 설정을 설명하자면 NanumBarunpen 폰트를 sans에 추가해서 기본 폰트로 적용했다.
...defaultTheme.fontFamily.sans 는 NanumBarunpen 폰트를 불러올 수 없는 경우 대체폰트로서 기존 폰트가 적용하게 만들기 위함이다.
sans 에 추가한 폰트는 재시작을 하면 적용된다.

3.2. 커스텀 폰트 설정하기

diary 는 내가 Tailwind에 임의로 추가한 커스텀 font-family이다.
EarlyFontDiary 폰트를 식별하기 쉽게 임의로 diary라는 이름을 붙였고 원하는 이름으로 설정할 수 있다.
font-이름 의 형태로 클래스가 생성된다.
따라서 추가한 폰트를 사용하려면 className에 font-diary를 명시해 주면 적용이 된다.

3.3. 사용 예시

각 폰트를 적용하는 방법과 결과는 아래와 같다.
아래 첨부 사진은 브라우저에 실행된 코드를 캡처한 것이다.
<div>나눔바른펜</div> 은 아무런 스타일링을 하지 않았지만 기본 폰트인 NanumBarunpen 으로 적용이 된 것을 확인할 수 있다.

<div>나눔바른펜</div>
<div className="font-diary">얼리폰트다이어리</div>

참고

본문에서는 자세히 다루지 않았지만 Tailwind에서는 상황에 맞게 폰트를 유연하게 설정할 수 있는 방법을 다양하게 제공한다.
보다 자세한 내용이 궁금하면 아래 정보를 참고하면 도움이 된다.

• Tailwind font family 커스터마이징
• Tailwind default font 설정