Alat gratis, tanpa daftar

Font apa yang dipakai website ini?

Tempel URL untuk melihat font yang dipakai sebuah website, lengkap dengan ketebalan, ukuran, dan di mana masing-masing muncul. Gratis, tanpa daftar. Lihat contoh seperti font Anthropic dan font Airbnb, atau pelajari apa yang ditambahkan oleh DESIGN.md.

Coba

Pakai font ini di kode Anda

Pencari font memberi Anda nama family, ketebalannya, dan di mana masing-masing dipakai untuk teks. Untuk memakainya lagi, muat setiap family sekali, beri setiap peran sebuah variabel CSS, dan selalu akhiri stack dengan fallback agar teks tetap tampil saat font sedang diunduh atau gagal dimuat.

1. Muat font-nya. Untuk family dari Google Fonts, tambahkan tag <link> atau gunakan next/font/google, dan minta hanya ketebalan yang tercantum di hasil pencarian. Untuk font komersial, beli lisensi web dari foundry-nya dan sajikan file-nya dengan @font-face.

2. Beri nama perannya. Satu variabel per tugas: display untuk judul, body untuk teks biasa, mono untuk kode. Ganti nama family dengan yang Anda temukan.

:root {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }

3. Pakai di Tailwind. Stack yang sama menjadi utility font-display, font-sans, dan font-mono.

/* app.css, Tailwind CSS v4 */
@theme {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Family hanyalah separuh dari sistem tipografi. Ukuran, line height, dan letter spacing setiap level ada di bagian tipografi sebuah DESIGN.md, yang bisa diterapkan agen coding Anda di setiap layar.

FAQ

Pertanyaan tentang pencari font

Jawaban singkat tentang Pencari Font Website gratis.

Alat ini membuka halaman di browser sungguhan dan membaca font terhitung (computed) dari setiap teks yang terlihat: family yang benar-benar dirender browser, beserta ketebalan dan ukurannya. Family kemudian dikelompokkan dan diurutkan berdasarkan seberapa banyak teks yang memakainya.

Tidak. Font adalah software berlisensi, dan lisensi sebuah situs biasanya hanya berlaku untuk situs itu. Jika family-nya ada di Google Fonts, Anda bisa mendapatkannya di sana secara gratis; jika tidak, cari foundry-nya dan beli lisensi untuk pemakaian Anda sendiri.

Alat ini membaca satu halaman yang Anda masukkan dan menampilkan hingga delapan family. Alat ini hanya melihat teks yang ditampilkan halaman itu kepada pengunjung baru: teks di balik login, halaman yang memblokir browser otomatis, dan tulisan yang digambar sebagai gambar atau SVG tidak terbaca, jadi font-nya tidak muncul.

Bisa. Web font apa pun yang dirender halaman akan terdeteksi, baik dari Google Fonts, Adobe Fonts, maupun server milik situs itu sendiri. Font Google dipratinjau dengan bentuk aslinya; font lain ditampilkan dengan fallback.

Bisa, satu elemen setiap kali. Di Chrome atau Edge, klik kanan teksnya, pilih Inspect, lalu gulir tab Computed ke Rendered Fonts, yang menyebut font yang benar-benar digambar. Di Firefox, panel Fonts di Inspector menampilkan font dari elemen yang dipilih dan setiap font yang dimuat halaman.

Alat ini hanya menampilkan font. DESIGN.md dari Design Extractor mencakup warna, skala tipografi lengkap, spacing, dan aturan komponen sebuah situs, dalam satu file yang bisa diikuti agen coding Anda.

Alat gratis lainnya

Lihat semua alat gratis

  • Validator DESIGN.md

    Tempel DESIGN.md untuk mengecek struktur dan token-nya serta melihat pratinjaunya, langsung di browser.

    Buka Validator DESIGN.md

Butuh sistem desain lengkapnya?

Dapatkan DESIGN.md berisi warna, skala tipografi, spacing, dan komponen situs apa pun, siap untuk agen coding Anda.

Dapatkan DESIGN.md