Font Gratis — Situs Teratas, Pratinjau Langsung, dan Cara Menggunakannya
Jelajahi sumber tepercaya untuk mendapatkan font gratis, uji pratinjau langsung, salin CSS bersih, dan pelajari cara yang benar menggunakan font web. Termasuk koleksi sumber terbuka, gratis untuk komersial, dan penggunaan pribadi.
Google Font
OFLPustaka sumber terbuka terbesar dengan CDN global cepat, subset, dan font variabel. Ideal untuk web dan aplikasi. Kebanyakan keluarga menggunakan Lisensi Font Terbuka SIL.
Berbagi font (oleh ITF)
BebasTipografi berkualitas ditawarkan secara gratis oleh Indian Type Foundry. Keluarga yang bersih, penyematan CDN yang mudah, dan banyak pilihan variabel.
Tupai Font
Komersial GratisDirektori yang dikurasi berfokus pada font penggunaan gratis untuk komersial. Termasuk generator font web untuk hosting mandiri.
Liga Tipe Bergerak
OFLPabrik pengecoran sumber terbuka klasik dengan keluarga abadi seperti League Spartan dan Raleway. Bagus untuk branding dan editorial.
Beludru
OFLTipografi sumber terbuka eksperimental dengan gaya tampilan yang khas. Sempurna untuk poster, budaya, dan karya kreatif.
Kolektif
OFLKomunitas pengecoran merilis font gratis berkualitas tinggi di bawah lisensi terbuka. Opsi editorial dan tampilan yang kuat.
Buka Pengecoran
OFLIndeks font sumber terbuka yang dikurasi dengan alat pengujian dan presentasi yang berpusat pada desain. Ideal untuk menemukan keluarga baru.
1001 Font
Lisensi CampuranDirektori besar dengan filter untuk penggunaan komersial gratis. Baca lisensi per keluarga; banyak yang hanya untuk penggunaan pribadi.
DaFont
Keperluan pribadiArsip besar terbaik untuk proyek dan inspirasi pribadi. Lisensi sangat bervariasi; periksa setiap halaman unduhan.
Ikon Font (Font Luar Biasa, Ikon Material, Ikon Remix)
Tingkat GratisUntuk ikon UI menggunakan pipa font. Pertimbangkan sistem ikon SVG modern, namun font ikon tetap berguna untuk penambahan cepat.
Pratinjau Langsung dan Cuplikan CSS
Hanya lokal — tidak ada yang diunggahPerbandingan Fitur (Snapshot)
Lisensi berbeda-beda di setiap keluarga| Lokasi | Sumber Terbuka | Komersial Gratis | Font Variabel | CDN/font Web | Catatan |
|---|---|---|---|---|---|
| Google Font | Ya | Ya* | Ya | Ya | Perpustakaan terbesar, CDN cepat |
| Berbagi font | Campur aduk | Ya | Banyak | Ya | Keluarga masa kini |
| Tupai Font | Campur aduk | Ya* | Beberapa | Generator | Dikurasi untuk penggunaan komersial |
| Liga Tipe Bergerak | Ya | Ya | Beberapa | Tuan rumah mandiri | Klasik yang tak lekang oleh waktu |
| Beludru | Ya | Ya | Beberapa | Tuan rumah mandiri | Tampilan eksperimental |
| DaFont | TIDAK | Bervariasi | Sedikit | TIDAK | Bagus untuk proyek pribadi |
Cara Menggunakan Font Gratis di Web
- Periksa lisensinya: OFL dan lisensi permisif lainnya adalah yang terbaik untuk proyek komersial. Beberapa situs mencantumkan font yang hanya untuk penggunaan pribadi.
- Pilih pengiriman: Tautan CDN untuk kecepatan, atau host mandiri dengan @ font-wajah untuk kontrol dan privasi.
- Pramuat font penting untuk teks pahlawan Anda jika CLS menjadi perhatian; tentukan tumpukan cadangan untuk menghindari kilatan cahaya.
- Lebih suka font variabel bila tersedia untuk mengurangi permintaan dan mendapatkan bobot yang fleksibel.
Contoh CDN
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
</style>
Contoh Host Mandiri
@font-face{
font-family: "MyFont";
src: url("/fonts/MyFont-Variable.woff2") format("woff2");
font-display: swap;
}
body{ font-family: "MyFont", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
* Selalu verifikasi lisensi setiap keluarga di situs sumber.
FAQ
Apakah Google Font gratis untuk penggunaan komersial?
Sebagian besar dirilis di bawah OFL dan gratis untuk penggunaan komersial. Konfirmasikan lisensi di setiap halaman keluarga.
Haruskah saya menggunakan font ikon atau ikon SVG?
Ikon SVG lebih fleksibel untuk aplikasi modern. Font ikon tetap berguna untuk penyiapan cepat atau pipeline lama.
Apakah font web memengaruhi kecepatan situs?
Ya. Menggunakan tampilan font: swap, subset jika memungkinkan, dan batasi keluarga dan bobot.
Apa font serba guna terbaik?
Inter, Roboto, dan Source Sans 3 serba guna. Pasangkan dengan serif seperti Merriweather atau Playfair untuk judul.