폰트 페어링 탐색기

폰트 페어링 탐색기란?

폰트 페어링 탐색기는 폰트 라이브러리를 일일이 뒤지지 않고도 보기 좋은 제목+본문 조합을 찾고 싶은 웹 디자이너, 개발자, 콘텐츠 제작자를 위한 무료 브라우저 내 도구입니다. Playfair Display와 Source Sans 3, Poppins와 Inter처럼 검증된 구글 폰트 조합을 엄선해 내장하고 각 조합을 실시간 미리보기로 보여 줍니다. 설정에서 페어링을 고르고 직접 제목과 본문 샘플을 입력하면 미리보기가 즉시 갱신됩니다. 마음에 들면 생성된 CSS를 복사하세요 — 구글 폰트 스타일시트를 불러오는 @import 한 줄과 제목·본문의 font-family 규칙이 들어 있습니다. 랜딩 페이지, 블로그 테마, 슬라이드, 디자인 시스템의 프로토타입을 만들거나 어떤 서체끼리 어울리는지 익히는 데 활용하세요.

폰트 페어링 탐색기 사용법

1. 설정을 열고 큐레이션된 구글 폰트 조합 목록에서 페어링을 고릅니다.
2. 폰트가 구글의 Fonts CSS API에서 로드될 때까지 잠시 기다립니다. 도착하면 미리보기가 새 서체로 바뀝니다.
3. 직접 샘플 텍스트를 입력해 실제 단어로 제목·본문 폰트를 확인하거나, 비워 두면 기본 샘플이 쓰입니다.
4. 외부 폰트 로드 안내를 읽어 폰트가 fonts.googleapis.com에서 온다는 것을 확인합니다.
5. 생성된 CSS 스니펫(@import 줄과 제목·본문 font-family 규칙)을 복사해 스타일시트에 붙여 넣습니다.

예시

페어링: Playfair Display + Source Sans 3

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

페어링: Poppins + Inter

h1, h2, h3 { font-family: 'Poppins', serif; font-weight: 600; }

자주 묻는 질문

어떤 폰트 페어링이 포함되어 있나요?

Playfair Display + Source Sans 3, Montserrat + Merriweather, Poppins + Inter, Lora + Roboto, Oswald + Open Sans, Raleway + Lato, Space Grotesk + IBM Plex Sans, DM Serif Display + DM Sans 등 인기 있는 구글 폰트 제목·본문 조합을 엄선했습니다. 설정에서 하나를 고르면 됩니다.

폰트는 어디에서 오나요?

페어링을 선택하면 브라우저가 해당 스타일시트를 구글의 공개 Fonts CSS API(fonts.googleapis.com)에서 직접 불러옵니다. 이는 브라우저에서 곧장 보내는 제3자 요청으로, 폰트가 저희 서버를 거치지 않습니다.

제가 입력한 샘플 텍스트는 비공개인가요?

네. 입력한 제목·본문 샘플은 전부 브라우저 안에 머물며 로컬 미리보기 렌더에만 쓰입니다. 어디로도 전송되지 않으며, 생성된 CSS에는 페어링의 폰트 이름만 들어가고 입력한 텍스트는 포함되지 않습니다.

복사되는 CSS에는 정확히 무엇이 들어 있나요?

두 서체의 구글 폰트 스타일시트를 불러오는 @import 한 줄과 font-family·font-weight 규칙입니다. h1/h2/h3 제목용 한 세트와 본문용 한 세트가 들어 있습니다. 스타일시트 맨 위에 붙여 넣으세요.

미리보기가 잠깐 비어 있거나 스타일이 적용되지 않는 이유는?

폰트는 렌더되기 전에 구글에서 내려받아야 합니다. 스타일시트가 도착할 때까지 짧은 로딩 안내가 표시되며, 로드에 실패하면(예: 오프라인) 오류 안내가 뜨고 미리보기는 브라우저 기본 폰트로 대체됩니다.