Penampil Google Fonts

Cari dan pratinjau Google Fonts. Temukan font yang sempurna untuk proyek web Anda dan lihat tampilannya secara real-time.

Pencarian Font

Cari atau filter font yang Anda inginkan.

Tampilkan hanya font Korea

Kategori

Pilih font untuk mulai melihat pratinjau

📚 Panduan Lengkap Google Fonts

Pelajari cara menggunakan Google Fonts secara efektif

🎨🎨 Apa itu Google Fonts?

Google Fonts adalah layanan font web gratis yang disediakan oleh Google.

1.400+ keluarga font sumber terbuka
Lisensi gratis untuk penggunaan komersial
Distribusi global melalui CDN cepat
Dukungan untuk berbagai bahasa dan sistem penulisan
Dioptimalkan untuk desain web responsif

⚡⚡ Cara Menggunakan Font Web

1. Menggunakan di 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. Menerapkan di CSS

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

🚀🚀 Kiat Optimasi Kinerja

Gunakan font-display: swap untuk mencegah FOIT
Gunakan preconnect untuk mengurangi waktu pencarian DNS
Muat secara selektif hanya bobot font yang dibutuhkan
Batasi set karakter dengan parameter subset
Siapkan fallback font lokal

Contoh pemuatan yang dioptimalkan:

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

📱📱 Tipografi Responsif

Pengaturan untuk keterbacaan optimal di berbagai perangkat:

/* 반응형 폰트 크기 */
.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 이상 권장

🎯🎯 Panduan Pemilihan Font

Font yang direkomendasikan berdasarkan penggunaan:

Teks isi: Noto Sans KR, Spoqa Han Sans
Judul: Noto Serif KR, Gowun Dodum
Kode: Fira Code, JetBrains Mono
Dekoratif: Jua, Gamja Flower

Kriteria pemilihan:

Konsistensi dengan identitas merek
Keterbacaan dan aksesibilitas
Rentang dukungan multi-bahasa
Kinerja pemuatan

🔧🔧 Penggunaan Lanjutan

Menggunakan Font Variabel:

/* 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);
}

Menggunakan Properti Kustom CSS:

: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); }

🛡️🛡️ Pertimbangan Aksesibilitas

Rasio kontras yang cukup: WCAG 4.5:1 atau lebih tinggi
Jarak baris yang tepat: direkomendasikan 1.4~1.6
Ukuran font yang dapat dibaca: minimum 16px
Ramah disleksia: pertimbangkan OpenDyslexic dll.

Contoh CSS yang dapat diakses:

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

🔍🔍 Debugging dan Pengujian

Verifikasi pemuatan font:

Periksa file font di tab Jaringan DevTools
Periksa font yang diterapkan sebenarnya di gaya Terkomputasi
Uji perilaku font-display

Alat pengukuran kinerja:

Google PageSpeed Insights
WebPageTest
Pemeriksaan optimasi font Lighthouse

폰트 fallback 테스트:

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