Pratinjau Google Fonts Pratinjau Google Fonts dengan teks yang dapat disesuaikan, ukuran, berat, dan spasi huruf.

🎨

Pratinjau Google Fonts

Pratinjau Google Fonts dengan teks yang dapat disesuaikan, ukuran, berat, dan spasi huruf.

Telusuri atau cari fon

Cari melalui 30 Google Fonts populer atau telusuri daftar lengkapnya.

Sesuaikan pratinjau

Atur teks sampel, ukuran font, berat, spasi huruf, dan tinggi baris.

Salin CSS

Pratinjau font pada berbagai berat dan salin kode @import dan CSS.

Loading tool...

What Is Pratinjau Google Fonts?

Alat Pratinjau Google Fonts memungkinkan Anda menjelajahi dan mempratinjau font Google yang populer dengan kontrol tipografi lengkap. Google Fonts menyediakan ratusan font sumber terbuka gratis yang dioptimalkan untuk web. Alat ini menampilkan 30 pilihan paling populer, dapat dicari berdasarkan nama. Untuk setiap font, Anda dapat mempratinjau dengan teks sampel kustom dan menyesuaikan ukuran font, bobot (100-900), spasi antar huruf, dan tinggi garis. Pratinjau multi-bobot menampilkan font pada berbagai bobot secara berdampingan, membantu Anda mengevaluasi kelenturannya. CSS yang dihasilkan mencakup URL @import Google Fonts dan deklarasi font-family dengan properti ukuran, bobot, spasi, dan tinggi garis. Alat ini sangat penting untuk mengevaluasi font sebelum menggunakannya dalam proyek.

Why Use Pratinjau Google Fonts?

30 Google Fonts populer dengan penyaringan pencarian
Kontrol tipografi lengkap: ukuran, berat, spasi, tinggi baris
Pratinjau multi-berat menunjukkan kelenturan font dalam satu pandangan
Keluaran CSS lengkap dengan @import URL dan deklarasi

Common Use Cases

Pemilihan Font

Evaluasi dan bandingkan fon sebelum memilih untuk proyek web.

Pengujian Tipografi

Uji fon pada ukuran dan berat tertentu untuk desain mockup.

Eksplorasi Font Merek

Telusuri opsi font untuk identitas merek dan bahan pemasaran.

Referensi Pengembang

Pratinjau cepat dan ambil kode CSS untuk fon selama pengembangan.

Technical Guide

Google Fonts menyajikan file font melalui CDN dengan pemilihan format otomatis (woff2 untuk browser modern). Metode @import menambahkan font melalui CSS: @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); Parameter family menentukan font dan bobot. Parameter display=swap menggunakan font-display: swap untuk visibilitas teks segera dengan font cadangan saat web font dimuat. Beberapa font dipisahkan oleh parameter &family=. Untuk kinerja, mintalah hanya bobot yang Anda butuhkan. Font variabel (tersedia untuk banyak Google Fonts) menyediakan semua bobot dalam satu file menggunakan sintaks wght@100..900. Subsetting font dapat lebih mengurangi ukuran file dengan memuat hanya rentang karakter yang diperlukan: parameter &text=Hello atau subset=latin. Gunakan properti font-family dengan font cadangan: font-family: 'Inter', system-ui, sans-serif.

Tips & Best Practices

1
Minta hanya berat font yang Anda gunakan sebenarnya untuk kinerja yang lebih baik
2
Gunakan font-display: swap untuk mencegah teks tidak terlihat saat memuat
3
Uji fon dengan konten aktual, bukan hanya Lorem Ipsum
4
Pertimbangkan fon variabel untuk kelenturan berat maksimum dalam satu file

Related Tools

Teks Gradien CSS

Buat teks dengan isi gradien menggunakan CSS background-clip dan text-fill-color.

🎨 CSS & Design

Generator Konfigurasi Tailwind

Buat file konfigurasi Tailwind CSS dengan warna, font, dan breakpoint kustom.

🎨 CSS & Design

Generator Skala Tipografi

Buat skala tipografi modular dengan ukuran dasar, rasio, dan satuan yang dapat disesuaikan.

🎨 CSS & Design

Pengujian Desain Responsif

Pratinjau situs web pada titik breakpoint perangkat yang umum dengan viewer iframe bawaan.

🎨 CSS & Design

Frequently Asked Questions

Q Apakah Google Fonts gratis?

Ya, semua Google Fonts gratis dan open-source untuk penggunaan pribadi dan komersial.

Q Bagaimana saya menambahkan Google Fonts ke proyek saya?

Gunakan metode @import di CSS atau tambahkan tag <link> di HTML Anda. Salin kode yang dihasilkan dari alat ini.

Q Apakah Google Fonts mempengaruhi kecepatan halaman?

Setiap font menambah waktu unduh. Minimalkan dampak dengan membatasi berat font dan menggunakan font-display: swap.

Q Apa itu font-display: swap?

Ini menampilkan teks segera dengan fon fallback, lalu menukar ke fon web saat dimuat, mencegah teks tidak terlihat.

Q Bisakah saya menjadi tuan rumah Google Fonts sendiri?

Ya, unduh file font dari fonts.google.com dan sajikan dari server Anda sendiri untuk kepatuhan GDPR dan pengunduhan yang lebih cepat.

About This Tool

Pratinjau Google Fonts is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.