Pratinjau Font Web
Bandingkan Google Fonts & Buat CSS Instan
Pengaturan Pratinjau
Tentang Pratinjau Font Web
Pratinjau Font Web adalah alat online yang memungkinkan Anda untuk secara instan memeriksa dan membandingkan berbagai font Google Fonts langsung di browser Anda.
Dalam alat ini, Anda dapat menyempurnakan ketebalan, ukuran, dan tinggi baris font. Selanjutnya, kode CSS dan tag HTML dihasilkan secara otomatis untuk mengimplementasikan font pilihan Anda.
Semua teks dan pengaturan yang dimasukkan diproses sepenuhnya di dalam browser Anda dan tidak pernah dikirim ke server.
Cara Menggunakan Alat
Tetapkan teks dan gaya
Pertama, masukkan teks yang ingin Anda pratinjau di panel pengaturan. Kemudian, sesuaikan ukuran font, tinggi baris, dan jarak huruf menggunakan bilah geser untuk membuat keadaan yang mirip dengan lingkungan situs Anda.
Pilih dan bandingkan font
Anda dapat meningkatkan jumlah slot perbandingan hingga 4. Pilih kategori dan pilih nama font tertentu dari dropdown untuk memuat font secara instan.
Salin kode dan terapkan
Setelah menemukan font yang tepat, periksa panel kode di bagian bawah. Pilih metode pemuatan dari tab "CSS", "<link>", dan "@import", lalu salin kodenya.
Glosarium Font Web
- Font Web
- Teknologi yang memungkinkan font ditampilkan di browser dengan mengunduh data font dari server atau CDN.
- Google Fonts
- Layanan font web open-source yang sepenuhnya gratis dari Google.
- font-family
- Properti dalam CSS yang digunakan untuk menentukan jenis huruf untuk teks.
- FOUT / FOIT
- Masalah tampilan yang terjadi saat font web sedang dimuat.
- Ketebalan Font (Font Weight)
- Merujuk pada ketebalan font, dari 100 hingga 900.
Pertanyaan Umum
- Q.Apakah font Jepang memengaruhi kecepatan pemuatan?
- Ya, karena bahasa Jepang memiliki jumlah karakter yang sangat besar, ukuran filenya lebih besar. Namun, Google Fonts menggunakan teknologi "dynamic subsetting" untuk mengirimkan hanya karakter yang digunakan.
- Q.Kombinasi (pasangan) font apa yang Anda rekomendasikan?
- Pendekatan klasik adalah menggunakan font "Serif" yang khas untuk judul dan menggabungkannya dengan "Sans-serif" yang sangat mudah dibaca untuk teks tubuh yang panjang.
- Q.Apakah data teks yang saya masukkan aman?
- Ya, sangat aman. Alat ini beroperasi sepenuhnya di sisi klien (di browser Anda).
- Q.Bagaimana cara mencegah FOUT dan FOIT?
- Dengan menentukan `font-display: swap;` di dalam @font-face CSS.
- Q.Apakah penggunaan komersial diperbolehkan?
- Font yang dimuat oleh alat ini disediakan di bawah lisensi open-source (seperti OFL) dan umumnya gratis untuk penggunaan komersial dan non-komersial.
Kasus Penggunaan
Pembuatan Prototipe Desain Web
Secara intuitif periksa dan bandingkan suasana font di browser tanpa alat desain tambahan.
Penyesuaian Tipografi & Kode
Pengembang dapat menyesuaikan ketebalan dan tinggi baris untuk mendapatkan nilai CSS yang optimal.
Memeriksa sebelum Presentasi
Sebelum membuat materi di Canva, bandingkan berbagai kandidat secara berdampingan dalam waktu singkat.
Verifikasi Pasangan Font
Pratinjau secara bersamaan apakah kombinasi font dekoratif dan font yang mudah dibaca berfungsi dengan baik.
Kirim Umpan Balik
Beri tahu kami pendapat Anda untuk membantu kami menyempurnakan alat ini.
Umpan balik sementara ditangguhkan
Server sedang sibuk atau perlindungan spam aktif. Silakan coba lagi nanti.