Font Terbaik Situs Web 2026: 15 Google Fonts Gratis

Font terbaik untuk situs web 2026: 15 Google Fonts gratis diberi peringkat untuk teks isi dan judul, lengkap dengan lisensi, desainer, CSS fallback stack dan pasangan font, serta cara memilih, memasangkan, dan memuat font dengan cepat.

Pertanyaan yang sering diajukan

Apa font terbaik untuk situs web?

Untuk teks isi, Inter, Source Sans 3, dan Roboto adalah pilihan aman yang sangat mudah dibaca: x-height besar, banyak ketebalan, dan dukungan bahasa yang luas, semuanya gratis di Google Fonts dengan SIL Open Font License. Untuk judul yang berkarakter, padukan salah satunya dengan serif seperti Lora atau Playfair Display. Font terbaik adalah yang mudah dibaca pada ukuran 16–20px di ponsel dengan konten nyata Anda.

Berapa banyak font yang sebaiknya digunakan situs?

Satu atau dua keluarga font cukup untuk hampir semua situs: satu untuk judul dan satu untuk teks isi, atau satu keluarga dengan ketebalan berbeda. Setiap keluarga tambahan menambah gangguan visual dan berkas yang harus diunduh.

Berapa ukuran font teks isi situs web?

16px adalah ukuran dasar umum dan pengaturan bawaan kebanyakan browser. Banyak situs memakai 17–20px untuk bacaan panjang. Atur panjang baris sekitar 50–75 karakter dan tinggi baris sekitar 1.5 untuk teks isi.

Apakah Google Fonts gratis untuk digunakan di situs komersial?

Font di pustaka Google Fonts dirilis dengan lisensi terbuka, sebagian besar di bawah SIL Open Font License, yang mengizinkan penggunaan komersial. Selalu periksa lisensi font tertentu. Font dari foundry atau Adobe Fonts memiliki ketentuan sendiri.

Untuk situs, pilih serif atau sans-serif?

Keduanya mudah dibaca di layar modern. Sans-serif cenderung terasa netral dan modern; serif dapat terasa editorial, tradisional, atau premium. Pilih berdasarkan nuansa yang diinginkan dan uji keterbacaan pada ukuran teks sebenarnya, bukan mengikuti aturan lama bahwa layar harus memakai sans-serif.

Sebaiknya font dihosting sendiri atau dimuat dari Google Fonts?

Keduanya dapat digunakan. Hosting sendiri membuat permintaan tetap di domain Anda, memberi kendali penuh atas caching, dan tidak mengirim data pengunjung ke pihak ketiga; sebagian tim memilihnya demi privasi. Apa pun pilihannya, gunakan berkas WOFF2, muat hanya ketebalan yang digunakan, dan atur font-display.

Font terbaik untuk situs web adalah yang mudah dibaca pada ukuran 16–20px di ponsel, tersedia dalam berbagai ketebalan, mendukung bahasa yang dibutuhkan, dan berlisensi untuk penggunaan web. Semua pilihan di bawah ini tersedia gratis di Google Fonts dan, berdasarkan kolom lisensi dalam entri masing-masing font di repositori Google Fonts (diperiksa 28 September 2026), ke-15 font ini dirilis di bawah SIL Open Font License yang mengizinkan penggunaan komersial dan hosting sendiri. Pemeringkatan ini merupakan penilaian editorial berdasarkan kriteria dalam panduan ini, bukan hasil pengujian. Setelah daftar, bagian selanjutnya membahas cara memilih, memasangkan, dan memuat font.

Font terbaik untuk situs web, berdasarkan peringkat

Coba pasangan mana pun secara langsung dengan teks Anda sendiri di alat pasangan font yang gratis. CSS stack setelah setiap nama adalah fallback yang kami rekomendasikan agar teks tetap terlihat bagus sebelum (atau tanpa) font web dimuat.

Terbaik untuk teks isi

1. Inter (sans, oleh Rasmus Andersson). Dirancang untuk layar, x-height sangat besar, ketebalan variabel dari thin hingga black. Pilihan aman bawaan untuk situs produk dan usaha kecil. font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
2. Source Sans 3 (sans, oleh Paul D. Hunt). Lebih ramah dan sedikit lebih sempit dari Inter; sangat baik untuk bacaan panjang. Dipasangkan dengan sibling-nya Source Serif 4. font-family: "Source Sans 3", system-ui, sans-serif;
3. Roboto (sans, oleh Christian Robertson, ParaType dan Font Bureau). Font sistem Android dalam waktu lama sehingga terasa familier; cakupan bahasa sangat luas. font-family: "Roboto", system-ui, Arial, sans-serif;
4. Open Sans (sans, oleh Steve Matteson). Netral, bentuk huruf terbuka, mudah dibaca pada ukuran kecil. font-family: "Open Sans", system-ui, Arial, sans-serif;
5. Lato (sans, oleh Łukasz Dziedzic). Hangat, sedikit membulat; cocok untuk bisnis jasa. font-family: "Lato", system-ui, Arial, sans-serif;
6. Nunito Sans (sans, oleh Vernon Adams dan lainnya). Lembut dan mudah didekati; cocok untuk anak-anak, kesehatan, dan perhotelan. font-family: "Nunito Sans", system-ui, sans-serif;
7. IBM Plex Sans (sans, oleh Mike Abbink dan Bold Monday). Terkesan teknis dan terstruktur; bagian dari superfamily bersama Plex Serif dan Plex Mono. font-family: "IBM Plex Sans", system-ui, sans-serif;
8. Merriweather (serif, oleh Sorkin Type). Serif teks kokoh yang dirancang untuk layar; serif terbaik untuk teks isi di blog serta situs hukum atau keuangan. font-family: "Merriweather", Georgia, "Times New Roman", serif;
9. Lora (serif, oleh Cyreal). Serif kaligrafi yang mudah dibaca, cocok untuk teks isi maupun judul. font-family: "Lora", Georgia, serif;

Terbaik untuk judul dan karakter merek

1. Playfair Display (serif kontras tinggi, oleh Claus Eggers Sørensen). Judul elegan untuk restoran, mode, dan pernikahan. Terlalu halus untuk teks isi. font-family: "Playfair Display", Georgia, serif;
2. Montserrat (sans geometrik, oleh Julieta Ulanovsky dan lainnya). Judul lebar dan tegas; padukan dengan font isi yang lebih sempit. font-family: "Montserrat", system-ui, sans-serif;
3. Poppins (sans geometrik, oleh Indian Type Foundry dan lainnya). Bulat dan modern; populer untuk startup. Gunakan ketebalan medium hingga bold untuk judul. font-family: "Poppins", system-ui, sans-serif;
4. DM Sans (sans geometrik kontras rendah, oleh Colophon Foundry). Bersih dan kompak; cocok untuk judul dan teks UI pendek. font-family: "DM Sans", system-ui, sans-serif;
5. Work Sans (grotesque, oleh Wei Huang). Berkarakter pada ukuran besar, lebih tenang pada ukuran kecil. font-family: "Work Sans", system-ui, sans-serif;
6. Space Grotesk (grotesque unik, oleh Florian Karsten). Judul khas untuk bidang teknologi, studio desain, dan merek kreatif. font-family: "Space Grotesk", system-ui, sans-serif;

Pasangan cepat dari daftar ini

Judul	Teks isi	Nuansa	Cocok untuk
Playfair Display	Source Sans 3	Elegan, klasik	Restoran, pernikahan, butik
Lora	Inter	Editorial hangat	Blog, pelatih, konsultan
Montserrat	Open Sans	Tegas, bersih	Perdagangan, agensi
Space Grotesk	Inter	Modern, teknis	SaaS, studio
Merriweather	Source Sans 3	Tepercaya	Hukum, keuangan, penerbitan
Inter 700	Inter 400	Netral, cepat (satu keluarga)	Apa saja; pilihan paling aman

Fakta lisensi

• Setiap font di atas tercantum dengan license: "OFL" dalam entri di repositori Google Fonts milik Google (github.com/google/fonts), diperiksa 28 September 2026. SIL Open Font License mengizinkan penggunaan di situs komersial, penyematan, dan hosting sendiri; Anda tidak boleh menjual berkas font itu sendiri.
• Sejumlah kecil Google Fonts menggunakan lisensi Apache 2.0 atau Ubuntu Font. Periksa lisensi yang ditampilkan di halaman font pada fonts.google.com sebelum menggunakan font yang tidak ada dalam daftar ini.
• Font dari Adobe Fonts atau foundry komersial memiliki lisensi web tersendiri; lisensi desktop saja tidak mencakup penyematan di situs.

Langkah 1: pilih font teks isi terlebih dahulu

Kebanyakan situs memilih font judul yang disukai, lalu mencari font pendamping. Lakukan sebaliknya. Teks isi paling banyak dibaca dan harus nyaman pada ukuran kecil di layar berkualitas rendah.

Hal yang perlu diperiksa saat menguji font teks isi:

• x-height besar. Tinggi huruf kecil dibandingkan huruf kapital. x-height yang lebih besar lebih mudah dibaca pada ukuran kecil. Bandingkan Inter atau Source Sans 3 dengan serif display tipis pada 16px dan perbedaannya terlihat jelas.
• Bentuk huruf jelas. Ketik "Il1 O0 rn m" dan periksa apakah karakter mudah dibedakan. Ini penting untuk harga, kode, dan alamat email.
• Ruang dalam huruf terbuka. Ruang tertutup pada huruf seperti e, a, dan o tidak boleh tertutup pada ukuran kecil.
• Ketebalan cukup. Sediakan setidaknya regular, medium atau semibold, dan bold. Sertakan italic jika kontennya panjang.
• Dukungan bahasa. Jika memiliki atau merencanakan halaman non-Inggris, pastikan font mendukung aksara dan karakter beraksen tersebut.

Uji dengan konten asli di ponsel, bukan menggunakan "Lorem ipsum" di monitor desktop.

Langkah 2: sesuaikan font dengan karakter merek

Font membawa asosiasi tertentu. Gunakan dengan sengaja.

Nuansa yang diinginkan	Gaya font yang biasanya cocok	Contoh (gratis di Google Fonts)
Netral, modern, produk	Sans grotesque atau neo-grotesque	Inter, Roboto, IBM Plex Sans
Ramah dan akrab	Sans humanis atau membulat	Nunito Sans, Source Sans 3, Figtree
Editorial dan tepercaya	Serif teks	Merriweather, Source Serif 4, Lora
Premium dan elegan	Serif kontras tinggi (judul saja)	Playfair Display, Cormorant
Teknis, pengembang	Monospace (aksen saja)	JetBrains Mono, IBM Plex Mono
Berani dan energik	Sans condensed atau tebal (judul)	Oswald, Bebas Neue, Archivo

Firma hukum, bisnis pesta anak, dan alat pengembang tidak seharusnya terlihat sama. Tanyakan: jika logo dihilangkan, apakah tipografi tetap memberi petunjuk tentang jenis bisnis ini?

Langkah 3: pasangkan berdasarkan kontras, bukan kemiripan

Jika menggunakan dua font, pilih yang jelas berbeda; jika tidak, tampilannya dapat terlihat seperti kesalahan. Dua sans-serif serupa yang berdampingan tampak tidak sengaja, sedangkan judul serif dengan teks isi sans-serif terlihat disengaja.

Cara memasangkan yang andal:

• Judul serif, teks isi sans. Playfair Display dengan Source Sans 3. Lora dengan Inter.
• Judul sans, teks isi serif. Cocok untuk bacaan panjang: judul Inter dengan teks isi Source Serif 4.
• Superfamily. Keluarga font yang dirancang dalam versi serif dan sans dengan struktur serupa, seperti IBM Plex Sans dan IBM Plex Serif, atau Source Sans 3 dengan Source Serif 4. Keduanya hampir selalu serasi.
• Satu keluarga dengan banyak ketebalan. Inter 700 untuk judul dan 400 untuk teks isi. Ini pilihan paling sederhana dan cepat, dan sering kali yang terbaik.

Aturan praktis: satu font untuk karakter, satu untuk kenyamanan membaca. Biarkan font judul memberi kepribadian dan font isi tetap tidak mengganggu.

Langkah 4: tetapkan skala tipografi agar konsisten

Konsistensi font situs berasal dari sekumpulan kecil ukuran tetap yang digunakan di mana-mana, bukan ukuran berbeda untuk setiap halaman. Skala tipografi mengalikan ukuran dasar dengan rasio.

Dengan ukuran dasar 16px dan rasio 1.25 (sering disebut major third):

Peran	Ukuran
Teks kecil, keterangan	13px
Teks isi	16px
H4	20px
H3	25px
H2	31px
H1	39px

Rasio lebih besar seperti 1.333 menghasilkan judul lebih dramatis; rasio lebih kecil seperti 1.2 cocok untuk antarmuka padat. Di ponsel, rasio lebih kecil mencegah judul terbungkus menjadi lima baris. Fungsi CSS clamp() membuat ukuran meningkat secara mulus dari ponsel ke desktop:

``css :root { --font-body: "Source Sans 3", system-ui, sans-serif; --font-heading: "Lora", Georgia, serif; } body { font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); line-height: 1.6; } h1 { font-family: var(--font-heading); font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); line-height: 1.15; } ``

Tetapkan ukuran ini sekali sebagai variabel atau token desain, lalu gunakan kembali. Begitulah cara menjaga semua halaman tetap konsisten.

Langkah 5: atur jarak dengan tepat

Pengaturan font lebih penting daripada pilihan fontnya. Nilai berikut membuat kebanyakan font nyaman dibaca:

• Tinggi baris: sekitar 1.5–1.7 untuk teks isi, 1.1–1.3 untuk judul besar.
• Panjang baris: sekitar 50–75 karakter per baris. Atur lebar maksimum wadah teks (sekitar 65ch sebagai titik awal yang baik).
• Jarak paragraf: jarak sekitar setinggi satu baris di antara paragraf.
• Jarak huruf: biarkan teks isi pada pengaturan bawaan. Rapatkan sedikit judul sangat besar; longgarkan sedikit label dengan semua huruf kapital.
• Kontras: WCAG 2.2 meminta rasio kontras minimal 4.5:1 untuk teks biasa dan 3:1 untuk teks besar. Teks isi abu-abu muda di atas putih sering tidak memenuhi ketentuan.
• Perataan: ratakan teks isi ke kiri dalam bahasa yang ditulis dari kiri ke kanan. Paragraf rata tengah dan rata kanan-kiri lebih sulit dibaca.

Langkah 6: muat font dengan cepat

Font adalah salah satu cara termudah memperlambat situs atau membuat teks bergeser saat dimuat.

1. Gunakan WOFF2. Format font web ini paling terkompresi dan didukung semua browser terkini.
2. Muat hanya ketebalan yang digunakan. Empat ketebalan dari dua keluarga berarti delapan berkas. Kurangi hingga sesuai kebutuhan desain.
3. Pertimbangkan font variabel. Satu berkas dengan rentang ketebalan dapat menggantikan beberapa berkas statis.
4. Gunakan subset. Jika hanya membutuhkan karakter Latin, muat subset Latin. Google Fonts melakukannya secara otomatis.
5. Atur font-display. font-display: swap segera menampilkan teks pengganti, lalu menggantinya dengan font web. optional menghindari pergantian pada koneksi lambat.
6. Pramuat font teks isi utama dengan <link rel="preload" as="font" type="font/woff2" crossorigin>.
7. Sesuaikan font pengganti. Pilih font sistem dengan proporsi serupa atau gunakan deskriptor CSS size-adjust agar tata letak tidak bergeser saat font web dimuat. Ini membantu skor Cumulative Layout Shift.

Tumpukan font sistem sebagai pilihan. Untuk antarmuka dan dasbor, system-ui memakai font perangkat (San Francisco di perangkat Apple, Segoe UI di Windows, Roboto di Android). Tidak perlu mengunduh, familier bagi pengguna, dan cepat.

Langkah 7: periksa lisensi

• Google Fonts: lisensi terbuka, sebagian besar di bawah SIL Open Font License yang mengizinkan penggunaan komersial.
• Adobe Fonts: termasuk dalam paket Creative Cloud, dengan penggunaan web yang terikat pada langganan.
• Foundry komersial: lisensi web sering dihitung berdasarkan kunjungan halaman bulanan atau domain. Baca ketentuan dan periksa harga terbaru.

Lisensi desktop untuk font tidak otomatis mengizinkan Anda menyematkannya di situs web.

Daftar periksa pemilihan font

• [ ] Font teks isi diuji pada ukuran sebenarnya di ponsel dengan konten nyata.
• [ ] Maksimal satu atau dua keluarga.
• [ ] Font judul dan isi jelas kontras, atau gunakan satu keluarga dengan beberapa ketebalan.
• [ ] Skala tipografi ditetapkan sekali dan digunakan di semua halaman.
• [ ] Tinggi baris, panjang baris, dan kontras diperiksa.
• [ ] Hanya ketebalan yang digunakan yang dimuat dalam WOFF2.
• [ ] font-display diatur dan font pengganti disesuaikan.
• [ ] Lisensi penggunaan web dikonfirmasi.

Tipografi merupakan bagian besar dari hal yang membuat situs web bagus, dan konsistensi lebih penting daripada pilihan satu font tertentu. Jika membuat situs dengan We.Inc, situs dimulai dari desain dengan pasangan font serasi dan skala konsisten. Anda dapat mengubah font lewat chat atau mengedit kodenya langsung. Lihat template untuk melihat contoh pasangan font.

Mulai gratis

Sumber (diperiksa 28 September 2026): metadata repositori Google Fonts untuk setiap font, github.com/google/fonts (kolom lisensi dan desainer); halaman font di fonts.google.com; SIL Open Font License.

Mulai gratis · Tanpa kartu kredit

Product

• AI Website Builder: Describe a site in plain English; it's live in minutes
• White Label Platform: Your brand, your domain, your margin
• Enterprise: SSO, custom SLAs, and dedicated support
• Developer API: Embed site generation into your SaaS

Who It's For

• For Agencies: Resell under your brand
• For Freelancers: Your own branded builder
• For Hosting Providers: Add a builder to your stack
• For SaaS Platforms: Embed site creation via API
• For Startups
• For Financial Services
• For Healthcare

Features

• Drag & Drop Editor
• Built-in SEO Tools
• Custom Branding
• Client Dashboard
• Reseller Billing (Stripe Connect)

Resources

• Blog
• Help Center
• Free Business Tools
• Website Templates
• Glossary & Guides
• Integrations
• Developers
• Benchmark
• Windows App

Company

• About Us
• Pricing
• Apply to the Partner Program
• Contact
• Careers
• Security

View Sitemap