폰트 페어링 탐색기

폰트 페어링 탐색기란?

폰트 페어링 탐색기는 폰트 라이브러리를 일일이 뒤지지 않고도 정돈된 제목+본문 조합을 찾고 싶은 웹 디자이너, 개발자, 콘텐츠 제작자를 위한 무료 브라우저 내 도구입니다. 서로 독립된 두 개의 검색형 선택기로 48종의 엄선 구글 폰트를 세리프·산세리프·디스플레이·모노로 필터링해 역할별 서체를 고르고, 역할별 컨트롤로 굵기·크기·행간·자간을 설정합니다. 실시간 미리보기는 직접 쓴 제목과 문단을 실제 폰트로 렌더하고, 셔플 버튼은 영감이 필요할 때 무작위 조합을 제안합니다. 마음에 들면 원하는 형식으로 생성된 CSS를 복사하세요 — @import 규칙, HTML link 태그, Fontsource 방식의 npm 임포트 — 랜딩 페이지, 블로그 테마, 슬라이드, 디자인 시스템에 활용하세요.

폰트 페어링 탐색기 사용법

1. 제목 선택기에서 세리프·산세리프·디스플레이·모노로 필터링하고, 입력해 검색한 뒤 폰트를 클릭해 선택합니다.
2. 본문 선택기에서도 같은 방식으로 문단 텍스트에 어울리는 서체를 고릅니다.
3. 설정을 열어 각 역할의 굵기·크기·행간·자간을 지정합니다.
4. 샘플 칸에 직접 제목과 문장을 입력하거나 비워 두어 기본 문장을 쓰고, 셔플을 눌러 무작위 조합 아이디어를 얻습니다.
5. 출력 형식(@import·<link>·Fontsource)을 고르고 생성된 CSS를 스타일시트나 프로젝트에 복사합니다.

예시

제목: Playfair Display 700 · 본문: Source Sans 3 400

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

형식: <link>

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Lora:wght@600&display=swap" rel="stylesheet">

자주 묻는 질문

두 폰트는 어떻게 고르나요?

역할마다 전용 선택기가 있습니다. 목록을 세리프·산세리프·디스플레이·모노로 필터링하고, 패밀리 이름의 일부를 입력해 검색한 뒤 결과를 클릭해 선택합니다. 제목과 본문은 각각 독립적으로 고르며, 셔플 버튼이 무작위 한 쌍을 골라 줍니다.

굵기·크기·행간·자간을 조절할 수 있나요?

네. 설정을 열면 제목과 본문 각각에 대해 굵기, 픽셀 단위 크기, 행간, 자간(em)을 따로 지정할 수 있습니다. 모든 변경은 실시간 미리보기와 복사되는 CSS에 함께 반영됩니다.

어떤 출력 형식을 복사할 수 있나요?

세 가지입니다. CSS @import 규칙, preconnect 힌트가 포함된 HTML <link> 태그, 그리고 Fontsource 방식의 npm 임포트(npm i @fontsource/… 와 굵기별 임포트 줄). 셋 다 h1–h3와 body에 대해 동일한 font-family·굵기·크기·행간·자간 규칙을 포함합니다.

폰트는 어디에서 오고, 제 텍스트는 비공개인가요?

조합을 고르면 브라우저가 그 두 패밀리만 fonts.googleapis.com의 구글 공개 Fonts CSS API에서 직접 불러옵니다 — 브라우저에서 곧장 보내는 제3자 요청으로, 저희 서버를 거치지 않습니다. 샘플 텍스트와 설정은 전부 기기에 남습니다.

어떤 폰트가 포함되나요?

세리프·산세리프·디스플레이·모노를 아우르는 인기 구글 폰트 48종을 엄선했습니다 — Playfair Display, Merriweather, Inter, Roboto, Poppins, Montserrat, Oswald, Space Grotesk, JetBrains Mono 등.