인기 있는 Google Fonts를 라이브 미리보기와 함께 엄선된 디렉터리로 둘러보고, 카테고리별로 필터링하며 이름으로 검색한 뒤, 바로 붙여넣을 수 있는 CSS를 복사하고 추천 폰트 페어링을 탐색하세요 — 모두 브라우저에서.

크기 34px

모든 처리가 브라우저에서 이뤄집니다 — 폰트는 라이브 미리보기를 위해 Google Fonts에서만 로드되며, 아무것도 업로드되지 않고, 가입 없음, 완전 무료입니다.


폰트 페어링 & Google Fonts 디렉터리 소개

이 폰트 디렉터리는 80개의 인기 있는 Google Fonts를 한 검색 가능한 페이지에 모아, 각각을 팬그램 샘플 줄, 알파벳과 숫자 줄, 카테고리 배지가 함께 있는 실시간 견본으로 렌더링합니다. 산세리프, 세리프, 디스플레이, 손글씨, 모노스페이스 다섯 가지 서체 계열을 다루므로 이름만 보고 추측하지 않고 실제 글자 모양을 비교할 수 있습니다.

모든 폰트 카드에는 엄선된 페어링 제안이 포함되어 있습니다. 제목과 본문 텍스트에 잘 어울리는 짝꿍 폰트들입니다. 페어링 칩을 클릭하면 한 폰트로 헤드라인을, 다른 폰트로 문단을 설정한 미리보기가 열려 조합을 확정하기 전에 실제 맥락에서 판단할 수 있습니다.

폰트나 페어링이 마음에 들면 클릭 한 번으로 바로 붙여넣을 수 있는 CSS를 복사할 수 있습니다. Google Fonts 스타일시트용 @import 줄과 적절한 대체 폰트를 포함한 일치하는 font-family 스택입니다. 폰트는 실시간 미리보기를 위해서만 Google Fonts에서 로드되며, 입력한 어떤 것도 어디에도 업로드되지 않습니다.

폰트 페어링 & Google Fonts 디렉터리 사용 방법

  1. 각 폰트 카드에서 이름, 카테고리 배지, 실제 서체로 설정된 실시간 샘플 텍스트를 확인하며 둘러보세요.
  2. 검색 상자로 이름으로 폰트를 찾거나, 카테고리 칩(Sans-serif, Serif, Display, Handwriting, Monospace)을 클릭해 그리드를 필터링하세요.
  3. 크기 슬라이더(16~72px)를 드래그해 원하는 제목이나 본문 크기로 샘플 줄을 미리 보세요.
  4. "Pairs with" 칩이나 "Preview pairing" 버튼을 클릭해 제안된 조합으로 설정된 헤드라인과 본문 문단을 확인하세요.
  5. 카드나 페어링 미리보기에서 "CSS" 버튼을 클릭해 @import 줄과 font-family 선언을 클립보드에 복사하세요.

자주 묻는 질문

산세리프, 세리프, 디스플레이, 손글씨, 모노스페이스 다섯 카테고리에 걸쳐 엄선된 80개의 널리 사용되는 Google Fonts를 담고 있습니다. 각 카테고리 칩은 현재 필터와 일치하는 폰트 수를 실시간으로 보여줍니다.

모든 폰트는 그와 잘 대비되는 하나 또는 두 개의 엄선된 짝꿍 폰트를 나열합니다. 일반적으로 제목용 디스플레이나 세리프 서체를 읽기 쉬운 본문 폰트와 짝지은 것입니다. 페어링 미리보기는 각 조합의 정확한 제목 및 본문 역할을 보여줍니다.

단일 폰트의 경우 Google Fonts css2 엔드포인트용 @import url() 줄(레귤러와 볼드 굵기)과 적절한 제네릭 대체 폰트가 포함된 font-family 스택을 얻습니다. 페어링의 경우 두 개의 import와 제목·본문용 별도 선언을 얻습니다.

네, 실시간 미리보기는 Google Fonts CDN에서 서체를 로드합니다. 이것이 페이지의 유일한 외부 요청입니다. 검색어, 필터 선택, 복사한 CSS는 브라우저에 그대로 남으며 어디에도 업로드되거나 저장되지 않습니다.

네, 둘러보기, 페어링 미리보기, CSS 복사 모두 계정 없이 무료입니다. 등록된 서체는 Google Fonts로, 오픈 라이선스 아래 개인 및 상업 프로젝트에서 무료로 사용할 수 있습니다.

크기 슬라이더로 16px에서 72px까지 어디든 견본 크기를 조정할 수 있으며, 모든 카드가 한 번에 업데이트됩니다. 이는 제목이나 본문에 사용할 정확한 크기에서 후보들을 비교하기 쉽게 만들어 줍니다.

도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.
문제 신고

이 무료 도구를 귀하의 웹사이트에 추가하세요 — 아래 코드를 복사하여 붙여넣으세요.