Alat Pratinjau & Pemasangan Font
Telusuri, pratinjau, dan bandingkan font untuk proyek berikutnya. Pilih dari font sistem dan Google Fonts populer, lalu sesuaikan dengan kontrol real-time untuk ukuran, ketebalan, tinggi baris, dan jarak antarhuruf. Uji pasangan font judul + isi secara berdampingan dan hasilkan kode CSS siap pakai, semuanya di browser Anda tanpa pendaftaran.
Browse system fonts and Google Fonts, preview with custom text, and compare font pairings side-by-side. Generate ready-to-use CSS code - all running locally in your browser.
Font Browser
40 fontsPreview
Inter
The quick brown fox jumps over the lazy dog.
24px / 1.5 lh / 0.0px ls · Loading...
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap" rel="stylesheet">
font-family: 'Inter', sans-serif;
Fonts are loaded from Google Fonts CDN for accurate preview rendering. System fonts work offline. All search, filtering, and code generation runs locally. Google Fonts are licensed under the SIL Open Font License - free for commercial use.
Your font selections and settings are automatically saved.
Mengapa Memakai Alat Pratinjau & Pemasangan Font Kami?
- Pratinjau font langsung dengan kontrol lengkap: pratinjau font apa pun dengan penyesuaian real-time - atur ukuran font (8-128px), ketebalan (100-900), tinggi baris, dan jarak antarhuruf, serta aktifkan miring. Ketik teks Anda sendiri untuk melihat persis tampilannya di desain Anda. Mendukung font sistem dan Google Fonts dengan pemuatan webfont instan.
- Pemasangan font berdampingan: uji kombinasi font judul + isi secara berdampingan dengan kontrol terpisah untuk setiap font. Aktifkan mode perbandingan untuk menyempurnakan pasangan proyek Anda. Sempurna untuk memilih font yang saling melengkapi untuk situs web, branding, dan materi cetak.
- CSS siap pakai dan kode @font-face: hasilkan kode CSS siap produksi untuk setiap font dan pasangan. Salin aturan @import, tag <link>, deklarasi CSS font-family, atau kode @font-face lengkap - semuanya terformat dan siap ditempel ke proyek Anda. Tanpa perlu menulis kode manual.
- Set karakter dan detail font: lihat set karakter lengkap setiap font termasuk huruf besar, huruf kecil, angka, tanda baca, dan karakter khusus. Lihat kategori font, ketebalan yang tersedia, dan kode CSS yang disarankan. Semua data font tertanam - tanpa panggilan API eksternal.
Siapa yang Memakai Alat Pratinjau & Pemasangan Font?
- Desain & pengembangan web: pratinjau font untuk proyek web dengan kontrol teks, ukuran, dan ketebalan langsung. Uji kombinasi font judul dan isi sebelum menetapkan desain. Hasilkan tag @import dan <link> yang siap untuk berkas HTML dan CSS Anda.
- Branding & desain logo: bandingkan pasangan font untuk proyek identitas merek. Uji bagaimana nama merek tampil dalam berbagai ketebalan dan gaya. Pratinjau tipografi merek dengan teks merek nyata, bukan lorem ipsum generik.
- Pembuatan konten & blogging: blogger dan kreator konten dapat menemukan kombinasi font sempurna untuk situsnya. Pratinjau bagaimana teks isi tampil pada ukuran baca, dan pilih font judul pelengkap yang cocok dengan gaya konten Anda.
- Prototipe desain UI/UX: desainer dapat menguji pilihan tipografi untuk antarmuka pengguna dengan cepat. Sesuaikan jarak antarhuruf dan tinggi baris untuk keterbacaan optimal di berbagai ukuran layar. Salin deklarasi CSS langsung ke prototipe Anda.
- Desain cetak & penerbitan: pratinjau bagaimana font akan tampil di materi cetak. Uji pasangan serif dan sans-serif untuk judul dan teks isi. Sesuaikan ukuran dan ketebalan untuk kebutuhan keterbacaan khusus cetak.
- CSS & pengembangan front-end: pengembang front-end dapat menjelajahi opsi font tanpa meninggalkan browser. Hasilkan kode CSS bersih dan terformat untuk setiap pilihan font. Gunakan keluaran CSS @font-face untuk font yang dihosting sendiri atau tautan CDN Google Fonts.
Pertanyaan yang Sering Diajukan
Alat ini mencakup font sistem (terpasang di perangkat Anda seperti Arial, Helvetica, Georgia, Times New Roman) dan Google Fonts populer (seperti Roboto, Open Sans, Lato, Montserrat, Merriweather, Playfair Display, Fira Code, dan banyak lagi). Google Fonts dimuat dari CDN Google agar pratinjau akurat.
Aktifkan mode perbandingan untuk melihat dua font berdampingan dengan kontrol terpisah untuk masing-masing. Pilih font judul di kiri dan font isi di kanan, atau bandingkan dua font untuk penggunaan yang sama. Setiap panel punya kontrol sendiri untuk ukuran, ketebalan, tinggi baris, jarak antarhuruf, dan teks khusus.
Untuk setiap font, alat ini menghasilkan aturan @import untuk berkas CSS, tag <link> untuk dokumen HTML, deklarasi CSS font-family dengan fallback yang sesuai, dan blok CSS lengkap dengan semua pengaturan Anda. Dalam mode pemasangan, Anda bisa menyalin CSS untuk kedua font.
Google Fonts dilisensikan di bawah SIL Open Font License (OFL), yang mengizinkan penggunaan komersial dan pribadi secara gratis, termasuk situs web, aplikasi, materi cetak, dan branding. Font sistem punya lisensinya sendiri. Selalu periksa lisensi font tertentu untuk kasus penggunaan Anda.
Font sistem bekerja sepenuhnya offline. Google Fonts memerlukan koneksi internet untuk dimuat dari CDN Google saat pratinjau. Penelusur, pencarian, dan penyaringan font tetap bekerja offline karena metadata font tertanam di alat ini.
Ketebalan font berkisar dari 100 (tipis) hingga 900 (hitam). Ketebalan umum meliputi 400 (reguler), 700 (tebal), dan 300 (ringan). Tidak semua font menyediakan setiap ketebalan - alat ini hanya menampilkan ketebalan yang tersedia untuk font terpilih.
Tampilan set karakter menunjukkan seluruh rentang karakter dalam sebuah font, dikelompokkan menjadi huruf besar, huruf kecil, angka, tanda baca, dan simbol. Ini membantu Anda memeriksa apakah font mendukung karakter yang Anda butuhkan untuk proyek Anda.
Jarak antarhuruf (tracking) mengatur ruang antar karakter. Jarak rapat membuat judul tampak lebih menyatu, sedangkan jarak yang lebih lebar dapat meningkatkan keterbacaan teks isi. Alat ini memungkinkan pengaturan dari -2px hingga +5px.
Ya. Pilihan font, teks khusus, ukuran, ketebalan, tinggi baris, dan mode perbandingan Anda otomatis tersimpan di localStorage browser. Tidak ada data yang pernah dikirim ke server atau disimpan di luar.
Salin aturan @import dan tempelkan di atas berkas CSS Anda, atau salin tag <link> dan tambahkan ke <head> HTML Anda. Deklarasi CSS font-family bisa diterapkan ke elemen mana pun. Untuk font yang dihosting sendiri, gunakan blok CSS @font-face lengkap.