폰트 조합 도구 — 엄선한 Google Fonts 제목·본문 조합, 실시간 미리보기 & CSS 복사

분위기로 필터링

샘플 언어:

제목 — Playfair Display

본문 — Inter

이 라틴 폰트는 한국어 글자를 포함하지 않습니다. 해당 언어 샘플은 기기의 시스템 폰트로 참고 표시됩니다.

제목 폰트: Playfair Display×본문 폰트: Inter

엄선한 폰트 조합(28)

CSS 복사

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap');

h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
body { font-family: 'Inter', system-ui, sans-serif; }

폰트 직접 지정 (선택사항)

아래 목록에서 제목 또는 본문 폰트를 골라 현재 조합을 덮어씁니다.

제목 폰트

본문 폰트

사용 방법

분위기 태그(모던·엘레강트·미니멀 등)로 필터링하거나, 엄선한 조합 목록에서 직접 선택하세요.
조합을 클릭하면 실제 폰트로 제목+본문 미리보기가 표시됩니다.
미리보기 텍스트를 내 카피로 바꿔서 실제 보임새를 확인하세요. 비우면 기본 샘플로 돌아갑니다.
셔플로 무작위 조합을 탐색하거나, 교체로 제목과 본문 폰트를 바꿔서 비교해 보세요.
마음에 드는 조합은 별 버튼으로 저장(브라우저에만 저장, 전송 없음).
조합이 정해지면 「CSS 복사」를 클릭해 Google Fonts 불러오기 코드와 font-family를 한 번에 복사하세요. 가입 불필요.

폰트 조합(페어링)이란?

폰트 조합이란 제목용과 본문용으로 서로 잘 어울리는 두 서체를 고르는 것입니다. 적절한 조합은 시각적 위계를 만들고 가독성을 높이며 디자인에 일관된 개성을 부여합니다. 흔한 실수는 폰트를 너무 많이 쓰는 것이고, 개성 있는 폰트 하나와 읽기 쉬운 중립 폰트 하나, 두 가지로 한정하는 것이 황금 법칙입니다.

각 폰트에 역할을 부여하세요

제목 폰트는 시선을 끌고 개성을 전달합니다. 본문 폰트는 오래 읽어도 피로하지 않은 가독성을 담당합니다. 역할이 다르기 때문에 서로 다른 서체 계열에서 고르는 것이 효과적입니다.

대비를 만드세요

세리프와 산세리프를 조합하는 것은 클래식한 접근입니다. 두 스타일의 구조적 차이가 디자인을 완성도 있게 만듭니다. 너무 비슷한 두 폰트는 어딘지 어색한 느낌을 줄 수 있으니 피하세요.

폰트는 두 가지로 제한하세요

두 폰트로 충분합니다. 고민될 때는 개성 있는 디스플레이 폰트로 제목을, 가독성 높은 중립 폰트로 본문을 선택하세요.

분위기 태그 설명

각 조합에는 1~3개의 분위기 태그가 있습니다. 태그를 조합해(OR) 필터링하거나, 필터 없이 셔플로 탐색할 수도 있습니다.

모던 / 미니멀 / 클린

깔끔하고 현대적인 느낌. SaaS·포트폴리오·테크 계열 사이트에 적합.

엘레강트 / 클래식 / 에디토리얼

세련되고 시대를 초월한 느낌. 브랜드 아이덴티티·잡지·블로그·럭셔리 제품에.

친근 / 플레이풀

따뜻하고 친근한 느낌. 개인 서비스·교육·컨슈머 앱·환영하는 분위기의 브랜드에.

테크 / 볼드

강하고 선진적인 느낌. 개발 도구·기술 문서·스타트업·임팩트 있는 랜딩 페이지에.

기능

엄선한 조합 사전

20개 이상의 손수 고른 제목×본문 조합. 각 조합에 분위기 태그와 한 줄 설명. 무작위 생성이 아닌 '쓸 수 있는 정석'만 수록.

실시간 미리보기 (텍스트 편집 가능)

선택한 조합의 제목+본문이 실제 폰트로 즉시 표시됩니다. 미리보기 텍스트를 내 카피로 바꿔서 확인할 수 있습니다.

셔플 & 교체

셔플은 현재 필터 범위에서 무작위로 다른 조합으로 이동합니다. 교체는 제목과 본문 폰트를 서로 바꿔 비교합니다.

즐겨찾기

마음에 드는 조합을 별표로 저장합니다. 브라우저에만 저장되며 서버에 전송되지 않습니다.

원클릭 CSS 복사

Google Fonts @import 또는 <link> 태그와 font-family 선언을 생성해 복사합니다. CSS 변수·Tailwind 형식도 선택 가능.

활용 예시

웹사이트 제목·본문 폰트 결정

분위기 태그로 브랜드 방향에 맞는 조합을 찾고, CSS를 스타일시트에 바로 붙여넣으세요.

슬라이드·발표자료 폰트 결정

CSS를 쓰지 않는 경우에도 어떤 폰트끼리 잘 어울리는지 참고할 수 있습니다. Figma·PowerPoint·Keynote에서 같은 폰트를 설치해 사용하세요.

CSS / Tailwind에 바로 붙여넣기

생성된 코드에는 Google Fonts 불러오기와 font-family 선언이 포함됩니다. Tailwind 형식은 fontFamily 설정 블록으로 즉시 사용 가능합니다.

일본어·중국어·한국어 표시 안내

이 도구의 대부분 조합은 라틴 문자만 지원하는 Google Fonts를 사용합니다. CJK 텍스트 처리 방식은 다음과 같습니다:

라틴 샘플 모드로 전환하면 폰트가 설계된 대로 라틴 문자를 정확하게 볼 수 있습니다.
한국어 샘플 모드에서는 미리보기가 기기 시스템 폰트로 대체 표시되며, 해당 라틴 폰트가 한국어 글자를 포함하지 않는다는 안내가 표시됩니다.
CJK 전용 조합(시스템 폰트 사용)도 목록에 포함되어 한국어 페이지에서 상단에 표시됩니다.
이 도구는 라틴 문자 웹사이트·로고·슬라이드·혼합 언어 레이아웃의 폰트 선택에 가장 유용합니다.

폰트와 개인정보

미리보기 폰트는 이 사이트에서 제공됩니다. 브라우저가 미리보기를 위해 fonts.googleapis.com에 연결하지 않으며 IP가 Google에 전송되지 않습니다.
샘플 텍스트와 저장된 즐겨찾기는 브라우저(localStorage)에만 보관됩니다. 서버에 업로드되지 않습니다.
복사하는 CSS 코드에 포함된 Google Fonts @import URL은 여러분의 사이트를 위한 것이며, 이 페이지가 그 요청을 실행하는 것이 아닙니다.
모든 폰트는 오픈소스(SIL OFL 1.1)로 상업적 사용이 가능합니다. 프로젝트에 사용하기 전에 Google Fonts에서 각 폰트의 최신 약관을 확인해 주세요.

자주 묻는 질문

좋은 폰트 조합은 어떻게 고르나요?

대비를 만드는 것부터 시작하세요. 세리프와 산세리프를 조합하거나, 디스플레이 폰트와 가독성 높은 본문용 폰트를 매칭하세요. 두 가지로 한정하고 분위기 태그로 범위를 좁히면 실패가 적습니다.

이 폰트들은 무료로 상업적으로 사용할 수 있나요?

모든 폰트는 SIL Open Font License(OFL 1.1)를 따르며 상업적 사용과 웹 임베딩이 허용됩니다. 클라이언트 프로젝트에 사용하기 전에 항상 Google Fonts 페이지에서 최신 약관을 확인하세요.

CSS를 내 프로젝트에 바로 붙여넣을 수 있나요?

네. CSS 코드에는 Google Fonts @import(또는 <link>)와 h1~h3, body에 대한 font-family 선언이 포함됩니다. 스타일시트에 붙여넣으면 바로 적용됩니다. Tailwind 형식은 fontFamily 설정 블록으로 제공됩니다.

입력한 텍스트나 데이터가 어딘가에 전송되나요?

아니요. 모든 처리가 브라우저에서 이루어집니다. 샘플 텍스트·즐겨찾기·폰트 선택은 전송되지 않으며, 미리보기 폰트도 이 사이트에서 제공되어 Google 서버에 연결하지 않습니다.

한국어 폰트 조합도 볼 수 있나요?

대부분의 조합은 라틴 문자만 지원하는 폰트를 사용합니다. 라틴 샘플 모드로 전환하면 폰트를 정확하게 볼 수 있습니다. 한국어 전용 조합(시스템 폰트 사용)도 목록에 있으며 상단에 표시됩니다.

제목이나 본문 폰트를 직접 바꿀 수 있나요?

네. 조합 목록 아래의 「폰트 직접 지정」 섹션에서 라이브러리의 어떤 폰트든 제목이나 본문에 지정할 수 있습니다. 미리보기와 CSS가 즉시 업데이트됩니다.

즐겨찾기는 어디에 저장되나요?

브라우저의 localStorage에만 저장됩니다. 기기나 브라우저 간에 동기화되지 않으며 서버에 전송되지 않습니다.