툴스모아

Google Fonts 뷰어

Google Fonts를 검색하고 미리보기할 수 있는 도구입니다. 원하는 폰트를 찾아 웹 프로젝트에 적용해보세요.

폰트 검색
원하는 폰트를 검색하거나 필터링하세요.
Roboto
sans-serif•18 스타일
Open Sans
sans-serif•12 스타일
Noto Sans JP
sans-serif•9 스타일
Montserrat
sans-serif•18 스타일
Inter
sans-serif•18 스타일
Poppins
sans-serif•18 스타일
Lato
sans-serif•10 스타일
Material Icons
monospace•1 스타일
Roboto Condensed
sans-serif•18 스타일
Roboto Mono
monospace•14 스타일
Roboto
Sans-serif • 18 스타일
안녕하세요! 구글 폰트 뷰어입니다. The quick brown fox jumps over the lazy dog. 1234567890
코드 가져오기
웹 프로젝트에 폰트를 적용하기 위한 코드를 복사하세요.

HTML 파일의 head 태그 안에 위 코드를 붙여넣으세요.

📚 Google Fonts 완벽 가이드

Google Fonts를 효과적으로 활용하는 방법을 알아보세요

🎨🎨 Google Fonts란?

Google Fonts는 구글에서 제공하는 무료 웹폰트 서비스입니다.

  • 1,400개 이상의 오픈소스 폰트 패밀리
  • 상업적 사용 가능한 무료 라이선스
  • 빠른 CDN을 통한 전 세계 배포
  • 다양한 언어와 문자 체계 지원
  • 반응형 웹 디자인에 최적화

⚡⚡ 웹폰트 사용법

1. HTML에서 사용

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. CSS에서 적용

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 성능 최적화 팁

  • font-display: swap 사용으로 FOIT 방지
  • preconnect로 DNS 조회 시간 단축
  • 필요한 font-weight만 선택적 로드
  • subset 파라미터로 문자 집합 제한
  • 로컬 폰트 fallback 설정

최적화된 로드 예시:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 반응형 타이포그래피

다양한 디바이스에서 최적의 가독성을 위한 설정:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}
  • 모바일: 16px 이상 권장
  • 태블릿: 18px 이상 권장
  • 데스크톱: 20px 이상 권장

🎯🎯 폰트 선택 가이드

용도별 추천 폰트:

  • 본문용: Noto Sans KR, Spoqa Han Sans
  • 제목용: Noto Serif KR, Gowun Dodum
  • 코드용: Fira Code, JetBrains Mono
  • 장식용: Jua, Gamja Flower

선택 기준:

  • 브랜드 아이덴티티와의 일치성
  • 가독성과 접근성
  • 다국어 지원 범위
  • 로딩 성능

🔧🔧 고급 활용법

Variable Fonts 사용:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

CSS Custom Properties 활용:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ 접근성 고려사항

  • 충분한 대비율: WCAG 기준 4.5:1 이상
  • 적절한 줄 간격: 1.4~1.6 권장
  • 읽기 쉬운 폰트 크기: 최소 16px
  • dyslexia 친화적: OpenDyslexic 등 고려

접근성 CSS 예시:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 디버깅 및 테스트

폰트 로딩 확인:

  • 개발자 도구 Network 탭에서 폰트 파일 확인
  • Computed 스타일에서 실제 적용된 폰트 확인
  • font-display 동작 테스트

성능 측정 도구:

  • Google PageSpeed Insights
  • WebPageTest
  • Lighthouse 폰트 최적화 점검

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;

💡💡 실무 활용 팁

프로젝트 설정:

  • 디자인 시스템에 폰트 규칙 정의
  • 폰트 로딩 전략 수립
  • fallback 폰트 스택 구성
  • 성능 모니터링 설정

유지보수:

  • 폰트 버전 관리
  • 사용하지 않는 weight 정리
  • 정기적인 성능 점검
  • 새로운 폰트 업데이트 확인