toolsmoah

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.
Roboto
sans-serif•18 gaya
Open Sans
sans-serif•12 gaya
Noto Sans JP
sans-serif•9 gaya
Montserrat
sans-serif•18 gaya
Inter
sans-serif•18 gaya
Poppins
sans-serif•18 gaya
Lato
sans-serif•10 gaya
Material Icons
monospace•1 gaya
Roboto Condensed
sans-serif•18 gaya
Roboto Mono
monospace•14 gaya
Roboto
Sans-serif • 18 gaya
Halo! Penampil Google Fonts. The quick brown fox jumps over the lazy dog. 1234567890
Dapatkan Kode
Salin kode untuk menerapkan font ke proyek web Anda.

Tempel kode di atas di dalam tag head file HTML Anda.

📚 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;

💡💡 Kiat Praktis

Pengaturan proyek:

  • Tentukan aturan font dalam sistem desain
  • Tetapkan strategi pemuatan font
  • Konfigurasikan tumpukan font cadangan
  • Siapkan pemantauan kinerja

Pemeliharaan:

  • Manajemen versi font
  • Bersihkan bobot yang tidak digunakan
  • Pemeriksaan kinerja rutin
  • Periksa pembaruan font baru
    Penampil Google Fonts