Lompat ke konten
Aback Tools Logo

Generator CSS Google Fonts

Buat URL @import dan tag <link> Google Fonts untuk kombinasi font dan ketebalan apa pun dengan generator CSS Google Fonts gratis kami. Pilih dari lebih dari 40 font populer, tentukan ketebalan yang Anda butuhkan, atur strategi font-display untuk performa pemuatan optimal, dan dapatkan potongan CSS atau HTML siap pakai seketika. Semua pemrosesan berjalan lokal di browser Anda, tanpa pendaftaran.

Google Fonts CSS Generator

Select fonts and weights, choose a display strategy, and get the @import or <link> tag ready to paste into your project. The output updates in real time - no signup required.

Load a Preset
·
PreviewThe quick brown fox jumps over the lazy dog. 0123456789
Fonts:1
Variants:4
Display:swap
Preview URL
Generated Code
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

/* CSS font-family usage */

/* Inter */
.font-inter {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

Mengapa menggunakan generator CSS Google Fonts kami?

  • Pembuatan CSS Google Fonts instan: pilih kombinasi Google Fonts dan ketebalan apa pun dan dapatkan @import atau tag siap pakai seketika. Generator kami memperbarui keluaran secara waktu nyata - tanpa menunggu, tanpa langkah build.
  • Generator CSS Google Fonts online yang aman: seluruh pembuatan terjadi lokal di browser Anda - pilihan font dan detail proyek Anda tidak pernah meninggalkan perangkat. Gunakan generator online kami dengan privasi penuh.
  • Generator CSS Google Fonts tanpa instalasi: buat @import dan tag Google Fonts langsung di browser apa pun tanpa Node.js, npm, atau alat build. Berfungsi di perangkat apa pun, di mana saja - cukup pilih dan salin.
  • Strategi font-display dan pratinjau langsung: pilih strategi font-display swap, optional, fallback, block, atau auto untuk performa pemuatan optimal. Lihat pratinjau langsung setiap font yang ditampilkan di browser sebelum menambahkannya ke proyek.

Kasus penggunaan umum generator CSS Google Fonts

  • Tipografi aplikasi web: pengembang frontend memakai generator kami untuk cepat menyiapkan tipografi aplikasi React, Vue, dan Angular. Pilih keluarga font, tentukan ketebalan yang dibutuhkan, dan tempelkan @import yang dihasilkan ke berkas CSS global Anda.
  • Desain halaman arahan: desainer dan pemasar memakai generator kami untuk memadukan font display dengan font isi pada halaman arahan. Muat preset seperti «Editorial Blog» atau «Creative Portfolio» dan dapatkan tag yang siap dalam hitungan detik.
  • Proyek Next.js dan Gatsby: pengembang Next.js dan Gatsby memakai generator kami untuk mendapatkan sintaks @import yang benar untuk stylesheet global atau _document.tsx mereka. CSS yang dihasilkan kompatibel dengan framework berbasis React apa pun.
  • Pemuatan font yang dioptimalkan: pengembang yang peduli performa memakai generator kami untuk memilih strategi font-display: swap atau optional, meminimalkan pergeseran tata letak dan meningkatkan skor Core Web Vitals situs mereka.
  • Pengembangan template email: pengembang email memakai generator kami untuk mendapatkan sintaks @import yang benar pada template email HTML. Pilih hanya ketebalan yang diperlukan agar URL impor tetap pendek dan cepat dimuat.
  • Penyiapan design system: engineer design system memakai generator kami untuk mendokumentasikan keluarga font, ketebalan, dan strategi tampilan yang dipakai di seluruh produk. Potongan CSS yang dihasilkan menjadi bagian dari dokumentasi design system.

Apa itu generator CSS Google Fonts?

Generator CSS Google Fonts adalah alat yang membangun URL @import atau tag <link> yang benar untuk memuat Google Fonts di proyek web. Google Fonts menyajikan lebih dari 1.400 keluarga font secara gratis melalui CDN-nya, tetapi menyusun URL API yang benar - terutama saat menggabungkan beberapa font, ketebalan, dan varian miring - menuntut pemahaman sintaks API CSS2 Google Fonts. Generator kami menangani semua ini secara otomatis: pilih font dan ketebalan, atur strategi font-display, dan dapatkan URL yang benar seketika. Tanpa perlu menyusun tuple sumbu ital,wght@ secara manual atau mengingat format parameter API.

Cara kerja generator CSS Google Fonts kami

  1. 1. Pilih font Anda: pilih dari lebih dari 40 Google Fonts populer yang dikelompokkan menurut kategori (sans-serif, serif, monospace, handwriting, display). Muat preset seperti «Modern SaaS» atau «Editorial Blog» untuk mulai seketika, atau tambahkan font satu per satu.
  2. 2. Pilih ketebalan dan gaya: pilih ketebalan spesifik (100-900) dan varian miring yang Anda butuhkan. Muat hanya ketebalan yang benar-benar dipakai - setiap ketebalan tambahan menambah waktu muat. Pratinjau langsung menampilkan setiap font di browser.
  3. 3. Salin atau unduh: salin @import atau tag <link> yang dihasilkan ke papan klip, atau unduh sebagai berkas .css. Keluarannya juga menyertakan deklarasi CSS font-family siap pakai untuk setiap font terpilih.

Apa yang dihasilkan

  • URL @import (CSS): pernyataan @import url('...') untuk dipakai di bagian atas berkas CSS atau di dalam tag <style>. Ini cara paling sederhana memuat Google Fonts dalam alur kerja berbasis CSS.
  • Tag <link> (HTML): sepasang tag <link rel="preconnect"> plus tag utama <link rel="stylesheet"> untuk dipakai di <head> dokumen HTML. Petunjuk preconnect meningkatkan performa pemuatan dengan membangun koneksi awal ke server Google.
  • Deklarasi CSS font-family: aturan CSS font-family siap pakai untuk setiap font terpilih, termasuk tumpukan font cadangan sistem yang benar untuk kategorinya (sans-serif, serif, monospace, dan lainnya).
  • Strategi font-display: parameter display= yang ditambahkan ke URL Google Fonts mengontrol bagaimana browser menangani periode pemuatan font. swap direkomendasikan untuk sebagian besar situs karena menampilkan font cadangan segera dan beralih ke font web saat termuat, mencegah teks tak terlihat.

Memilih strategi font-display yang tepat

  • swap (direkomendasikan): menampilkan font cadangan segera, lalu beralih ke font web saat termuat. Terbaik untuk teks isi dan judul yang teks tak terlihatnya akan merugikan pengalaman.
  • optional: memakai font web hanya jika termuat dalam jendela sangat singkat (biasanya 100 ms). Terbaik untuk situs kritis performa di mana pemuatan font tidak boleh memengaruhi metrik.
  • fallback: periode blokir singkat (100 ms), lalu periode tukar (3 detik). Titik tengah antara swap dan optional.
  • block: menyembunyikan teks hingga font termuat (hingga 3 detik). Hindari untuk teks isi - dapat menyebabkan teks tak terlihat (FOIT) dan merugikan Core Web Vitals.

Pertanyaan yang Sering Diajukan

Generator CSS Google Fonts adalah alat yang membangun URL @import atau tag <link> yang benar untuk memuat Google Fonts di proyek web. Generator kami berjalan sepenuhnya di browser Anda - pilih font dan ketebalan, atur strategi font-display, dan dapatkan potongan CSS atau HTML siap pakai seketika. Tanpa pendaftaran.

Tag <link> di <head> HTML umumnya lebih disukai untuk performa. Tag ini memungkinkan browser menemukan dan mulai memuat font lebih awal daripada @import di dalam berkas CSS, yang baru diproses setelah berkas CSS itu sendiri diunduh. Gunakan @import saat Anda perlu memuat font dari dalam berkas CSS.

font-display: swap memberi tahu browser untuk segera menampilkan font cadangan saat font web dimuat, lalu beralih ke font web ketika siap. Ini mencegah teks tak terlihat (FOIT) dan direkomendasikan Google PageSpeed Insights serta panduan Core Web Vitals.

Muat hanya ketebalan yang benar-benar Anda pakai di CSS. Setiap ketebalan tambahan menambah ukuran unduhan total. Untuk sebagian besar proyek, 2-3 ketebalan sudah cukup (misalnya 400 untuk isi, 600 untuk semibold, 700 untuk tebal). Memuat kesembilan ketebalan sangat menambah waktu muat.

swap menampilkan font cadangan segera dan beralih ke font web saat termuat. optional memakai font web hanya jika termuat dalam jendela sangat singkat (biasanya 100 ms); bila melewati jendela itu, font cadangan dipakai sepanjang sesi halaman. optional paling baik untuk situs yang kritis performa.

Bisa. Generator kami menggabungkan beberapa keluarga font ke dalam satu URL permintaan API, yang lebih efisien daripada membuat permintaan terpisah untuk tiap font. Tambahkan sebanyak yang Anda butuhkan - generator otomatis membangun URL gabungan yang optimal.

Ya, untuk performa terbaik. Keluaran tag <link> dari generator kami otomatis menyertakan dua petunjuk preconnect: satu untuk fonts.googleapis.com dan satu untuk fonts.gstatic.com. Petunjuk ini memberi tahu browser untuk membangun koneksi awal ke server Google, mengurangi latensi pemuatan font.

Tentu saja. Seluruh pembuatan CSS Google Fonts terjadi sepenuhnya di browser Anda memakai JavaScript. Pilihan font dan kode yang dihasilkan tidak pernah dikirim ke server mana pun. Semuanya berjalan lokal di perangkat Anda, menjamin privasi menyeluruh.

Ya! Generator CSS Google Fonts kami 100% gratis tanpa pendaftaran, tanpa iklan, dan tanpa batas penggunaan. Buat @import dan tag link Google Fonts untuk proyek apa pun sebanyak yang Anda butuh - sepenuhnya gratis, selamanya.