Cara Memasang Google Fonts di Website (3 Cara Mudah)

Untuk memasang font Google di websitemu, ada dua pekerjaan kecil: memuat font, lalu menyuruh teksmu memakainya. Kamu bisa memuatnya dengan tag <link> di bagian kepala (head) halaman, dengan baris @import di paling atas CSS, atau dari file font yang kamu simpan sendiri. Cara tercepat mendapatkan baris yang pas adalah ekstensi gratis FontMee: coba font di situsmu sendiri, tekan Salin CSS, lalu tempel. Di bawah ada ketiga caranya, dengan kode yang bisa kamu salin apa adanya.

Apa arti sebenarnya “memasang font”

Bayangkan font seperti tamu di sebuah makan malam. Pertama kamu harus mengundangnya, artinya halamanmu harus mengunduh file font. Lalu kamu harus memberinya tempat duduk, artinya menyuruh teksmu memakainya. Kalau undangannya dilewati, font tidak pernah datang. Kalau tempat duduknya dilewati, ia duduk di pojok sementara tekstmu tetap memakai font lama.

Kedua pekerjaan itu ditulis dalam CSS, kumpulan aturan gaya yang memberi tahu sebuah website harus tampil seperti apa. Undangan ditaruh di head halamanmu (area tersembunyi di bagian atas HTML tempat browser membaca instruksinya) atau di paling atas file CSS. Tempat duduknya adalah satu aturan pendek, seperti di contoh di bawah. Cara mana pun yang kamu pilih, dua pekerjaan itu tetap sama.

Cara 1: tag link di head halamanmu

Ini metode yang ditunjukkan Google di situsnya sendiri. Kamu menaruh tiga baris di head halaman: dua yang menyuruh browser bersiap terhubung ke Google, dan satu yang memuat font. Biasanya termuat sedikit lebih awal dari cara lain, karena browser bisa mulai mengambil font bahkan sebelum membaca CSS-mu.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap">
  <style>
    h1, h2 { font-family: 'Lora', serif; }
  </style>
</head>

Bagian terakhir dari link, display=swap, menyuruh browser menampilkan teks langsung dengan font cadangan lalu menukarnya dengan font asli begitu tiba, jadi pengunjung tidak pernah menatap ruang kosong. Kata setelah koma di aturanmu (serif) adalah cadangan itu, dan Google menyarankan untuk selalu menambahkannya. Pakai cara ini kalau kamu bisa mengedit HTML halamanmu.

Cara 2: baris @import di paling atas CSS

Kadang kamu tidak bisa menyentuh head halaman, hanya CSS. Itu yang terjadi pada kotak CSS Tambahan di WordPress, bagian CSS di banyak pembuat website, atau file style.css biasa. Maka undangannya bisa tinggal di dalam CSS, sebagai satu baris yang harus berada paling atas, di atas aturan lainnya.

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

h1, h2 { font-family: 'Lora', serif; }

Ini yang paling mudah ditempel, tapi biasanya sedikit lebih lambat dari tag link, karena browser baru menemukan font setelah membaca CSS-mu. Di situs kecil, kamu hampir tidak akan merasakannya.

Cara 3: simpan sendiri file fontnya

Di sini kamu mengunduh file font dari Google, mengunggahnya ke websitemu sendiri dan mengarahkan ke sana, sehingga browser pengunjungmu sama sekali tidak menghubungi Google. Sebagian orang memilihnya demi privasi, sebagian demi kecepatan, dan sebagian karena aturannya berbeda di tiap negara, jadi periksa apa yang berlaku untuk pengunjungmu. Langkahnya sedikit lebih banyak, tapi tidak ada yang sulit: kamu menyalin satu folder, lalu menambahkan aturan yang menunjukkan di mana file itu berada.

@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

h1, h2 { font-family: 'Lora', serif; }

Google Fonts bersumber terbuka, jadi boleh diunduh dan disimpan sendiri, termasuk untuk proyek komersial. Yang lama adalah mencari dan mengunduh setiap file lalu menulis tiap blok @font-face dengan tangan. FontMee mengerjakannya untukmu, seperti yang akan kamu lihat sebentar lagi.

Cara mana yang sebaiknya dipilih?

• Kamu bisa mengedit HTML halamanmu: pakai tag link (cara 1).
• Kamu hanya bisa mengedit CSS, atau memakai pembuat website dengan kotak CSS: pakai @import (cara 2).
• Kamu ingin browser pengunjung memuat semuanya dari servermu sendiri: simpan sendiri filenya (cara 3).

Ragu? Mulai dari cara 1 atau 2. Kamu bisa beralih nanti, dan hanya satu baris pemuat font yang berubah.

Dapatkan kode yang pas dengan FontMee

Mengetik baris-baris ini dengan tangan adalah tempat sebagian besar kesalahan terjadi: tanda plus yang terlewat, ketebalan yang tidak dimiliki font, aturan yang tidak cocok dengan judulmu. FontMee adalah ekstensi Chrome gratis, tambahan kecil yang memberi browser satu fitur baru, dan ia menuliskan barisnya untukmu. Kamu mencoba font dulu di situs aslimu, melihat tampilannya, lalu menyalin kode untuk pilihan persis itu. Ada lebih dari 1.900 font, dan video menunjukkan panelnya beraksi.

1. Pasang FontMee. Tambahkan dari Chrome Web Store. Gratis dan tidak perlu akun. Klik ikon puzzle di Chrome lalu sematkan, supaya selalu hanya satu klik.
2. Buka websitemu dan klik ikon FontMee. Panel terbuka di samping halaman. Kamu juga bisa menekan Alt + Shift + F. Halaman milik Chrome sendiri (Tab Baru, Web Store, halaman chrome://) tidak bisa diubah.
3. Pilih ke mana font akan dipakai. Di bawah Terapkan perubahan ke pilih Semua, Judul atau Isi, lalu klik sebuah font. Judul dan isi bisa dikerjakan terpisah.
4. Periksa di halaman yang asli. Beralih antara Font asli dan Pratinjau FontMee, dan pakai Atur untuk ukuran, ketebalan dan tinggi baris sampai terlihat pas.
5. Tekan Salin CSS. Sebuah jendela terbuka dengan empat tab: CSS (cara @import), HTML (cara tag link), Variabel dan Tailwind untuk yang memakainya. Pilih tab yang cocok dengan caramu, tekan Salin ke papan klip dan tempel ke situsmu. FontMee hanya meminta ketebalan yang benar-benar dimiliki font ke Google, jadi kamu tidak berakhir dengan link yang rusak.
6. Mau cara 3? Di jendela yang sama tekan Unduh ZIP self-hosting. Kamu mendapat folder berisi file font, sebuah fonts.css, sebuah fontmee.css dan README singkat. Unggah foldernya dan tambahkan dua link stylesheet.

Empat hal yang perlu dicek sebelum menerbitkan

• Muat hanya yang kamu pakai. Setiap font dan ketebalan tambahan membuat halamanmu sedikit lebih berat. Dua font dan dua ketebalan sudah lebih dari cukup untuk kebanyakan situs.
• Siapkan font cadangan. Akhiri setiap font-family dengan nama umum seperti serif atau sans-serif, supaya teks tetap tampak baik saat font dimuat.
• Cek huruf yang kamu butuhkan. Aksen seperti é dan ç, serta huruf Kiril atau Vietnam, tidak ada di semua font. Lihat kata-katamu sendiri di FontMee sebelum menyalin.
• Cek lisensinya. Google Fonts bersumber terbuka dan gratis untuk penggunaan komersial. Jendela kode FontMee mencantumkan lisensi tiap font, jadi kamu bisa melihatnya sebelum menerbitkan.

Belum punya website? Kalau begitu fontnya nomor dua. Sebuah website juga butuh rumah untuk tinggal, dan pembuat website adalah cara tercepat mendapatkannya tanpa kode.

Dapatkan ekstensinya

FontMee gratis, dengan 1.900+ font, Salin CSS dalam empat format, ZIP self-hosting, dan unggah font milikmu sendiri. Tanpa akun, tanpa langganan. Tambahkan dari Chrome Web Store, atau baca dulu halaman FontMee.

Perlu diketahui sebelum mulai

Pertanyaan Umum