폰트 테스트·페어링

Google Fonts 페어링·간격·스타일 미리보기.

타이포그래피 설정

제목 글꼴

본문 글꼴

제목 크기36px

제목 굵기

본문 크기16px

본문 굵기

인기 조합

모던 테크Poppins + Inter클래식 에디토리얼Playfair Display + Lora코퍼리트 볼드Montserrat + Open Sans클린 모노스페이스JetBrains Mono + Roboto웜 뉴스Merriweather + Lato

CSS 코드 내보내기

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

h1.custom-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 36px;
}

p.custom-body {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 16px;
}

작동 방식

짝을 맞춰 미리 볼 Google Fonts를 선택합니다.
실시간 편집 가능한 미리보기에 직접 텍스트를 입력합니다.
크기, 굵기, 자간을 조정해 타이포그래피를 테스트합니다.
프로젝트에서 이 조합을 쓸 수 있도록 CSS를 내보냅니다.

주요 용도

확정하기 전에 제목/본문 폰트 조합을 시험합니다.
실제 문구가 폰트에서 어떻게 보이는지 미리 봅니다.
Google Fonts 조합을 임베드할 CSS를 얻습니다.

참고 사항

Google Fonts에서 폰트를 로드하므로, 폰트 미리보기는 Google에서 폰트를 가져옵니다(이 도구가 완전히 오프라인이 아닌 유일한 지점).
렌더링은 운영체제와 브라우저마다 조금씩 다를 수 있습니다.

자주 묻는 질문

제 텍스트를 사용하나요?

네, 미리보기가 편집 가능하므로, 자리표시자 대신 실제 제목과 문단을 붙여넣을 수 있습니다.

CSS를 받을 수 있나요?

네, 선택한 Google Fonts 조합을 사이트에 임베드할 CSS를 내보냅니다.

완전히 오프라인인가요?

거의 그렇습니다, 모든 것이 브라우저에서 실행되지만, Google Font 미리보기는 Google에서 폰트 파일을 가져옵니다. 입력한 텍스트는 업로드되지 않습니다.

폰트 테스트·페어링

타이포그래피 설정

작동 방식

주요 용도

참고 사항

자주 묻는 질문

제 텍스트를 사용하나요?

CSS를 받을 수 있나요?

완전히 오프라인인가요?

관련 도구

작동 방식

주요 용도

참고 사항

자주 묻는 질문

제 텍스트를 사용하나요?

CSS를 받을 수 있나요?

완전히 오프라인인가요?