폰트, 자간/행간, 색상 글로벌로 설정하는 법 (with Tailwind CSS)

< 목차 >

1. 로컬에 폰트 파일 저장

2. layout.tsx에서 폰트 주입

3. font를 className에 일일이 넣지 않아도 글로벌로 적용되게 하는 법

4. 폰트, 자간/행간 적용된 결과물

5. 색상 적용하는 법

 

 

1. 로컬에 폰트 파일 저장

가장 먼저 폰트를 저장해야 한다.

 

 

public 폴더에 font를 넣으면 반영되지 않고, Next.js의 에러가 뜬다.

그래서 font는 꼭 app 폴더 하위에 넣어줘야 font가 잘 반영된다.

 

로컬에 폰트 파일을 저장해 사용하면 성능, 안정성, 보안 측면에서 유리하단 이점이 있다.

 

1. 성능 향상: 폰트 파일을 서버(CDN)가 아닌 로컬에서 불러오므로 네트워크 요청 지연을 줄여 로딩 속도가 빨라짐. 캐싱이 더 효율적이며, 브라우저가 폰트를 빠르게 로드함

2. 외부 의존성 감소: CDN 서비스 장애나 연결 문제에 영향을 받지 않아 안정적인 폰트 로딩이 가능하며, 사용자 경험이 개선됨

3. 브랜딩 및 커스터마이징: 로컬 파일은 커스터마이징(특정 문자 추가/제거 등)이 가능해 브랜드 정체성에 맞는 폰트 구현이 쉬움

4. 보안: 외부 요청이 없으므로 데이터 유출 위험이나 추적을 방지할 수 있음

5. 오프라인 지원: PWA(Progressive Web App)와 같은 환경에서 인터넷 없이도 폰트를 사용할 수 있음

 

 

이런 방법도 있다

@font-face {
    font-family: 'PretendardRegular';
    src: url('<https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff>') format('woff');
    font-weight: 400;
    font-style: normal;
}

 

scr: 부분을 봐보자.

url로 서버에 항상 요청을 넣어서 폰트를 받아오는 방법도 있다.

 

 

2. layout.tsx에서 폰트 주입

 

폰트를 전역적으로 사용되게 하기 위해선 layout.tsx에서 폰트를 주입해줘야 한다.

 

Tailwind CSS 공식 문서의 방법대로도 적용해봤는데 적용이 안 돼서

Next.js에서 제공해주는 localFont() 메서드를 활용해서 적용했더니 잘 적용되었다.

 

위 사진에 하이라이트 처리한 코드처럼 작성하면 프로젝트 전역에서 PretendardRegular 라는 변수명으로 폰트를 적용할 수 있다.

 

// tailwind.config.ts

theme: {
	extend: {
		fontFamily: {
			sans: ['var(--font-geist-sans)'],
		},
	},
},

 

tailwind.config.ts 파일에 sans: ['var(--font-geist-sans)'] 를 넣어줘야 className 에 font-sans 만 작성해도 해당 폰트가 적용된다.

 

처음엔 Next.js, Tailwind CSS 공식 문서에서 Local Fonts, Custom Font 관련 문서를 보다가 답이 안 나와서 ‘모든 페이지 최상단에 font-sans 를 넣어주는 게 최선인가’ 하며 엄청 생각을 많이 했다. 중복되는 코드가 있는 게 싫어서 고민했다.

 

추후 우리 팀 디자이너 분이 영문 폰트는 따로 추가된다고 하여 그냥 font-sans 를 넣어주는 것도 나쁘지 않을 것 같다 싶기도 했는데, 영문은 따로 알아서 지정되게 할 수 있는 방법이 있을 듯했다.

 

그래서 더 고민하다가 방법을 고안해냈다.

 

 

3. font를 className에 일일이 넣지 않아도 글로벌로 적용되게 하는 법

 

답은 globals.css 파일에 있었다. 이 코드에서 가장 중요한 것은

 

html {
	font-family: 'PretendardRegular';
	letter-spacing: -0.02em; /* 자간 -2% */
	line-height: normal; /* 행간 자동 */
}

 

이 부분이다.

 

font-family: 'PretendardRegular'; 를 넣어줘야 따로 font-sans 처럼 폰트를 계속 className에 넣어주지 않아도 자동으로 적용된다.

 

폰트 사이즈는 Tailwind CSS의 Font Size(https://tailwindcss.com/docs/font-size)를 참고하면 좋다.

PX(픽셀) 계산은 PX을 REM으로 변환해주는 사이트(https://nekocalc.com/px-to-rem-converter)를 이용하면 간편하게 계산할 수 있다.

 

 

4. 폰트, 자간/행간 적용된 결과물

 

 

5. 색상 적용하는 법

: Figma 디자인에 맞게 색상 토큰을 tailwind.config.ts에 객체로 추가

 

Tailwind CSS에서 색상을 커스텀하려면 tailwind.config.ts 파일에서 extend.colors를 사용해 색상을 정의하면 된다.

 

// [토큰 추가 예시] tailwind.config.ts

const config: Config = {
  theme: {
    extend: {
      colors: {
        black: '#111111',
        white: '#FFFFFF',
        gray: {
          900: '#222222',
          800: '#2B2B2B',
          700: '#616161',
          600: '#757575',
          500: '#9E9E9E',
          400: '#B5B5B5',
          300: '#E0E0E0',
          200: '#EEEEEE',
          100: '#F5F5F5',
          50: '#FAFAFA',
        },
        background: { // text-background-base
          base: '#101010',
          title: '#FFFFFF',
          subtitle: '#F5F5F5',
        },
      },
    },
  },
};

 

// [사용 예시] Tailwind의 색상 클래스를 사용하여 적용

<div className="bg-background-base text-background-title min-h-screen p-8">
	<h1 className="text-gray-50 text-4xl">타이틀 텍스트</h1>
	<h2 className="text-gray-100 text-3xl mt-4">서브 타이틀 텍스트</h2>
	<p className="text-background-subtitle">서브 타이포그래피 텍스트</p>
	<div className="bg-gray-900 text-gray-200 p-4 mt-4 rounded">
	Gray 900 배경, Gray 200 텍스트로 스타일링된 박스
	</div>
</div>