사용자 지정 글꼴 모음
구성 파일에서 fontFamily를 정의해 Google Fonts나 로컬 글꼴을 통합하고 font-* 유틸리티 클래스로 적용합니다.
사용자 지정 글꼴 모음은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Tailwind의 기본 글꼴 스택
Tailwind는 font-sans, font-serif, font-mono라는 세 가지 기본 글꼴 패밀리 유틸리티를 제공합니다. 각각은 글꼴을 다운로드하지 않아도 모든 운영 체제에서 보기 좋도록 신중하게 선택한 시스템 글꼴 스택으로 연결됩니다. 대부분의 프로젝트에서는 이러한 글꼴을 프로젝트에 독특한 타이포그래피 정체성을 부여하는 브랜드 웹 글꼴로 대체하거나 보완하게 됩니다.
/* Tailwind's built-in font stacks */
font-sans → ui-sans-serif, system-ui, -apple-system, ...
font-serif → ui-serif, Georgia, Cambria, ...
font-mono → ui-monospace, SFMono-Regular, Menlo, ...
<!-- Using them -->
<p class="font-sans">System sans-serif text</p>
<p class="font-serif">Elegant serif text</p>
<pre class="font-mono">code example</pre>Google 글꼴 선택하기
Google Fonts는 무료 웹 글꼴을 제공하는 가장 일반적인 출처입니다. fonts.google.com을 둘러보고 브랜드에 어울리는 글꼴을 선택합니다. UI 프로젝트에서 인기 있는 선택으로는 깔끔하고 현대적인 인터페이스에 적합한 Inter, 기술 제품에 적합한 Geist, 편집 디자인의 우아함을 살리는 Playfair Display, 코드 편집기에 적합한 JetBrains Mono가 있습니다. 실제로 사용할 굵기만 선택합니다(일반 400과 세미볼드 600이면 대부분의 경우에 충분합니다).
<!-- Add to your HTML <head> to load from Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Or for Playfair Display -->
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">Tailwind 구성에 글꼴 등록하기
<link> 태그나 CSS @import로 글꼴을 불러온 후 tailwind.config.js의 theme.extend.fontFamily 아래에 등록합니다. Google Fonts에 표시된 글꼴 이름을 정확히(필요한 경우 공백도 포함하여) 스택 배열의 첫 번째 항목으로 지정합니다. 웹 글꼴을 불러오지 못할 경우를 대비해 시스템 글꼴을 대체 글꼴로 항상 포함합니다.
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
display: ['Playfair Display', 'Georgia', 'serif'],
mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
},
},
},
};HTML에서 글꼴 패밀리 적용하기
등록한 후에는 font-{key} 유틸리티 클래스를 사용하여 글꼴을 적용합니다. sans를 확장했다면 이제 font-sans가 선택한 글꼴로 해석됩니다. display와 같은 새 키를 추가했다면 유틸리티 클래스는 font-display가 됩니다. 글꼴 패밀리를 가장 상위 조상 요소에 적용하여 모든 하위 요소에 상속되게 한 다음, 필요한 경우 특정 영역에서 재정의합니다.
<body class="font-sans">
<!-- All text inherits Inter font -->
<h1 class="font-display text-5xl font-bold">
Playfair Display Heading
</h1>
<p class="font-sans text-gray-600">
Regular body text in Inter
</p>
<pre class="font-mono text-sm bg-gray-100 p-4 rounded">
code in JetBrains Mono
</pre>
</body>기본 글꼴 패밀리 대체하기
모든 요소에 font-sans를 추가하지 않고 선택한 글꼴을 어디서나 기본 글꼴로 사용하려면 theme.fontFamily.sans(extend 외부)를 재정의하여 기본 스택 전체를 대체합니다. 그런 다음 body 요소에 font-sans를 한 번만 적용하면 body에서 상속되는 모든 텍스트가 추가 클래스 이름 없이 사용자 지정 글꼴을 사용합니다.
// tailwind.config.js — Override default sans (replaces the default)
module.exports = {
theme: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
// serif and mono keep defaults unless also overridden
},
},
};
<!-- Now font-sans = Inter everywhere -->
<body class="font-sans">
<p>This text automatically uses Inter</p>
</body>Next.js 글꼴 최적화로 글꼴 불러오기
Next.js 프로젝트에서는 Google Fonts CDN 링크 대신 next/font 모듈을 사용합니다. 이 모듈은 빌드 시 글꼴을 다운로드하여 자체 도메인에서 제공하고, 외부 요청을 없애며, 글꼴 크기를 자동으로 조정하여 레이아웃 이동을 방지합니다. CSS 변수 이름을 생성하고 해당 변수를 사용하여 Tailwind 구성에 전달하면 Next.js 글꼴 최적화와 Tailwind를 긴밀하게 통합할 수 있습니다.
// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
});
export default function Layout({ children }) {
return (
<html lang="en" className={inter.variable}>
<body className="font-sans">{children}</body>
</html>
);
}
// tailwind.config.js
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui'],
},
},
}로컬 글꼴 파일 사용하기
구매한 글꼴이나 사용자 지정 글꼴을 사용할 때는 글꼴을 로컬에 호스팅하고 CSS @font-face 규칙으로 정의합니다. 글꼴 파일을 public 디렉터리에 배치하고 절대 경로로 참조합니다. font-display: swap을 사용하면 사용자 지정 글꼴이 로드되는 동안 대체 글꼴을 즉시 표시하여 로드 중 텍스트가 보이지 않는 문제를 방지할 수 있습니다. 그런 다음 평소처럼 Tailwind 구성에 글꼴 패밀리를 등록합니다.
/* In your global CSS */
@font-face {
font-family: 'BrandFont';
src: url('/fonts/BrandFont-Regular.woff2') format('woff2'),
url('/fonts/BrandFont-Regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* tailwind.config.js */
theme: {
extend: {
fontFamily: {
brand: ['BrandFont', 'sans-serif'],
},
},
}글꼴 굵기 유틸리티
글꼴 패밀리를 설정한 후에는 Tailwind의 font-{weight} 유틸리티로 굵기를 제어합니다. 일반적으로 사용하는 굵기로는 font-normal(400), font-medium(500), font-semibold(600), font-bold(700)가 있습니다. 사용하려는 굵기를 Google Fonts에서 실제로 불러와야 합니다. 불러오지 않은 굵기를 요청하면 브라우저가 이를 합성하므로 텍스트 품질이 떨어집니다.
<!-- Load weights 400, 600, 700 from Google -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<!-- Use them with Tailwind weight utilities -->
<p class="font-sans font-normal">Regular body text (400)</p>
<p class="font-sans font-semibold">Semibold text (600)</p>
<h1 class="font-sans font-bold">Bold heading (700)</h1>가변 글꼴
가변 글꼴은 모든 굵기(때로는 너비와 기울임꼴도 포함)를 하나의 파일에 담아 HTTP 요청을 줄이면서 전체 굵기 범위를 지원합니다. 가변 글꼴을 한 번 불러오면 특정 굵기를 요청했는지 걱정하지 않고 어떤 Tailwind 글꼴 굵기 유틸리티든 사용할 수 있습니다. 최근 Google Fonts의 많은 글꼴에서 가변 버전을 제공하므로 URL에서 ital,wght@ 축 구문을 찾아보세요.
<!-- Variable font: loads once, supports all weights 100-900 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
<!-- Now ALL weight utilities work with Inter -->
<p class="font-thin">font-thin (100)</p>
<p class="font-normal">font-normal (400)</p>
<p class="font-bold">font-bold (700)</p>
<p class="font-black">font-black (900)</p>글꼴 다듬기 유틸리티
Tailwind는 화면에서 글꼴이 렌더링되는 방식을 제어하는 antialiased 및 subpixel-antialiased 유틸리티를 제공합니다. body에 전역적으로 antialiased를 적용하면 회색조 안티앨리어싱이 활성화되어 고DPI 디스플레이에서 최신 웹 글꼴이 더 선명하고 가늘게 보입니다. 대부분의 Tailwind 프로젝트에서는 글꼴 패밀리 선언과 함께 antialiased를 기본 스타일로 추가합니다.
<body class="font-sans antialiased text-gray-900">
<!-- Text renders with smooth antialiasing across the page -->
<h1 class="font-bold text-4xl tracking-tight">
Crisp, antialiased heading
</h1>
</body>글꼴 로딩 테스트하기
Chrome DevTools를 열고 Network 탭으로 이동한 다음 Font로 필터링하여 사용자 지정 글꼴이 올바르게 로드되는지 확인합니다. 글꼴 파일 목록이 표시되어야 합니다. Elements 패널에서 텍스트 노드를 선택하고 Computed 탭을 확인합니다. font-family 속성에는 대체 글꼴이 아니라 실제로 적용된 사용자 지정 글꼴 이름이 표시되어야 합니다. 로딩 문제를 발견하려면 여러 뷰포트 크기와 연결 속도에서 테스트합니다.
빠른 확인
Tailwind CSS에서 사용자 지정 글꼴 패밀리를 사용하는 방법을 제대로 이해했는지 테스트합니다.
레슨 요약
이 레슨에서는 다음을 배웠습니다. 대체 글꼴을 포함한 배열로 theme.extend.fontFamily에 사용자 지정 글꼴을 등록하는 방법, CDN <link> 태그로 Google Fonts를 불러오거나 Next.js에서 최적화된 로딩을 위해 next/font를 사용하는 방법, 선명한 글꼴 렌더링을 위해 antialiased를 전역적으로 적용하는 방법입니다. 다음으로 Tailwind의 기본 눈금에서 부족한 부분을 채우도록 사용자 지정 간격 값을 추가합니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“사용자 지정 글꼴 모음” 강의는 무료인가요?
네 — “사용자 지정 글꼴 모음” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“사용자 지정 글꼴 모음”에서 뭘 배우나요?
구성 파일에서 fontFamily를 정의해 Google Fonts나 로컬 글꼴을 통합하고 font-* 유틸리티 클래스로 적용합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“사용자 지정 글꼴 모음” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 사용자 지정 색상 추가
- 사용자 지정 글꼴 모음
- 사용자 지정 간격 값
- Tailwind에서 CSS 변수 사용하기