Fon Percuma - Tapak Teratas, Pratonton Langsung, dan Cara Menggunakannya
Layari sumber yang dipercayai untuk fon percuma, ujian pratonton langsung, salin CSS bersih, dan pelajari cara yang betul untuk menggunakan fon web. Koleksi sumber terbuka, bebas untuk komersial, dan penggunaan peribadi.
Fon Google
OFLPerpustakaan sumber terbuka terbesar dengan CDN global, subset, dan fon berubah-ubah. Sesuai untuk web dan aplikasi. Kebanyakan keluarga menggunakan lesen font SIL Open.
Fontshare (oleh ITF)
PercumaTypefaces kualiti yang ditawarkan secara percuma oleh Foundry Jenis India. Keluarga bersih, CDN mudah dibenamkan, dan banyak pilihan berubah -ubah.
Tupai Font
Komersial percumaDirektori Curated memberi tumpuan kepada fon penggunaan percuma untuk komersil. Termasuk penjana webfont untuk host diri.
Liga jenis bergerak
OFLFoundry sumber terbuka klasik dengan keluarga yang abadi seperti League Spartan dan Raleway. Hebat untuk penjenamaan dan editorial.
Velvetyne
OFLTypefaces sumber terbuka eksperimen dengan gaya paparan tersendiri. Sempurna untuk poster, budaya, dan kerja kreatif.
Kolektif
OFLPenemuan komuniti melepaskan fon percuma berkualiti tinggi di bawah lesen terbuka. Pilihan editorial dan paparan yang kuat.
Buka Foundry
OFLIndeks fon sumber terbuka yang dikendalikan dengan alat ujian dan persembahan reka bentuk-sentris. Sesuai untuk menemui keluarga segar.
1001 fon
Lesen campuranDirektori besar dengan penapis untuk kegunaan percuma untuk komersil. Baca lesen setiap keluarga; Ramai yang digunakan hanya.
Dafont
Penggunaan PeribadiArkib besar terbaik untuk projek dan inspirasi peribadi. Lesen berbeza -beza; Semak setiap halaman muat turun.
Fon Ikon (Font Awesome, Ikon Bahan, Ikon Remix)
Tahap percumaUntuk ikon UI menggunakan saluran paip font. Pertimbangkan sistem ikon SVG moden, tetapi fon ikon tetap berguna untuk menambah cepat.
Coretan Pratonton Langsung dan CSS
Tempatan sahaja - tidak ada yang dimuat naikPerbandingan Ciri (Snapshot)
Lesen berbeza mengikut keluarga| Tapak | Sumber terbuka | Komersial percuma | Fon berubah -ubah | CDN/Webfonts | Nota |
|---|---|---|---|---|---|
| Fon Google | Ya | Ya* | Ya | Ya | Perpustakaan terbesar, CDN Cepat |
| Fontshare | Bercampur | Ya | Banyak | Ya | Keluarga moden |
| Tupai Font | Bercampur | Ya* | Beberapa | Penjana | Yang dikendalikan untuk kegunaan komersial |
| Liga jenis bergerak | Ya | Ya | Beberapa | Tuan rumah diri | Klasik yang tidak berkesudahan |
| Velvetyne | Ya | Ya | Beberapa | Tuan rumah diri | Paparan eksperimen |
| Dafont | Tidak | Berbeza | Beberapa | Tidak | Hebat untuk projek peribadi |
Cara menggunakan fon percuma di web
- Semak lesen: OFL dan lesen permisif lain adalah yang terbaik untuk projek komersial. Sesetengah laman web menyenaraikan fon peribadi sahaja.
- Pilih Penghantaran: Pautan CDN untuk kelajuan, atau tuan rumah diri dengan @font-face untuk kawalan dan privasi.
- Fon kritikal preload untuk teks wira anda jika CLS adalah kebimbangan; Tentukan susunan sandaran untuk mengelakkan kilat.
- Memilih fon berubah apabila tersedia untuk mengurangkan permintaan dan mendapatkan berat 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 diri
@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; }
* Sentiasa sahkan lesen setiap keluarga di tapak sumber.
Soalan Lazim
Adakah fon Google percuma untuk kegunaan komersial?
Kebanyakan dibebaskan di bawah OFL dan bebas untuk kegunaan komersil. Sahkan lesen pada setiap halaman keluarga.
Sekiranya saya menggunakan fon ikon atau ikon SVG?
Ikon SVG lebih fleksibel untuk aplikasi moden. Fon ikon tetap berguna untuk penyediaan cepat atau saluran paip warisan.
Adakah fon web mempengaruhi kelajuan tapak?
Ya. Gunakan Font-Desplay: Swap, subset jika mungkin, dan hadkan keluarga dan berat.
Apakah fon tujuan umum yang terbaik?
Inter, Roboto, dan Sumber Sans 3 adalah serba boleh. Sepasang dengan serif seperti Merriweather atau Playfair untuk tajuk.