Cara Memasang dan Menggunakan Google Font di Blog

Tutorial memakai huruf Google Font untuk text di website / blog beserta cara memanggilnya melalui link stylesheet. Cara menggunakan font eksternal di CSS melalui import.
Cara Menggunakan Google Font Melalui CSS di Blog dan Website



1. Pengenalan

Pemilihan font sangat penting untuk tampilan sebuah website maupun blog. Jika memilih font yang kurang tepat, kenyamanan saat membaca akan berkurang dan membuat pengunjung tidak betah berlama-lama menghabiskan waktunya untuk satu artikel. Pasti nggak mau kan hal itu terjadi. Nanti pengunjung kabur semua, blognya sepi deh.

Salah satu tempat penyedia font yang cukup populer adalah Google Font. Ini sangat memudahkan web developer dan UI Designer dalam menghasilkan karya yang menarik. Selain karena pilihannya beragam, pengguna pun tidak dipungut biaya alias gratis. Disana tersedia banyak font keren dengan berbagai kategori dan model yang bisa disesuaikan dengan kebutuhan.


Cara Memakai Font Dari Google Untuk Web dan Blog

Pertama-tama, pilih dulu font yang akan digunakan. Bukalah website penyedia resminya yang beralamat di:

https://fonts.google.com

Ketebalan huruf dalam CSS dideklarasikan dengan property font-weight dan value standar 400 (normal) atau 600 (tebal / bold). Bisa juga dengan value normal atau bold.

/* Normal, tidak tebal */
font-weight: 400;
font-weight: normal;

/* Tebal */
font-weight: 600;
font-weight: bold;

Yang unik dalam Google Font ini adalah ketebalan yang lebih banyak. Jika font standar mentok di 400 dan 600, maka disana ada 100, 200, 300, dan begitu seterusnya. Semakin tinggi angkanya maka semakin tebal. Tapi tidak semua jenis font punya fitur tersebut. Ada yang hanya menyediakan satu ketebalan standar di angka 400, ada juga yang beragam. Ini yang harus diperhatikan ketika memilih font. Sesuaikan dengan kebutuhan saja.

Cara cek ada tidaknya ketebalan tersebut bisa dari menu pilihan seperti gambar berikut. Jika menu yang tengah ada pilihan lain, maka hurufnya punya banyak jenis ketebalan. Jika tidak, ya berarti tidak punya. Ada juga info property font-style yang value standarnya normal, italic, atau underscore.

Cara Memakai Google Font Di Blogger



2. Pilih Font

Saya contohkan memakai font bernama Rubik yang memiliki gaya sampai 10 buah. Klik icon tanda plus di kanan atas (+). Setelahnya akan muncul menu baru di bawah dengan tulisan 1 Family Selected.

Cara Memanggil Font Eksternal Google di Blog

Klik menu tersebut untuk membukanya. Pergi ke bagian Customize untuk memilih ketebalan. Saya centang semua saja deh biar komplit. Semakin banyak dipilih, maka waktu loading semakin lambat. Maka pastikan hanya pilih gaya yang benar-benar dibutuhkan.

Cara Download Google Font Untuk Web dan Blog


Pindah lagi ke menu di sebelahnya yaitu Embed. Simpan kode yang muncul karena inilah yang nantinya akan ditambahkan ke pengaturan HTML agar font eksternal Google bisa dipakai di blog.

<link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
Cara Import Google Font Ke Blogspot


3. Tambahkan Script Ke Blog

Ada dua cara untuk menggunakan Google Font di blog: standar dan @import. PILIH SALAH SATU! Jangan dua-duanya. Hasil akhirnya sama saja kok.


3.1. Melalui Script Standar

Kode dipanggil melalui perintah biasa seperti memanggil script external berjenis stylesheet pada umumnya. Kode harus disimpan "SESUDAH / DI BAWAH" <head>.

<head>
  <link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
</head>

3.2. Melalui Import CSS

Kode dipanggil melalui CSS dengan perintah @import yang disimpan di dalam tag <style>.

<style>
  @import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>


4. Cara Menggunakan Google Font

Saatnya memanggil dan menggunakan Google Font yang sudah diimport! Caranya sederhana kok. Tambahkan property font-family yang valuenya diisi dengan nama font tadi. Bisa juga tambahkan ketebalan, gaya penulisan, dan lainnya. Contoh:

font-family: 'Rubik', sans-serif;
font-weight: 400;
font-style: italic;

Jika digunakan untuk heading atau judul, maka penulisan lengkapnya seperti ini:

h1, h2, h3, h4, h5 {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 24px;
}

Kalau mau ganti font di semua bagian blog tanpa terkecuali, gunakan selector body.

body {
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 27px;
}


5. Contoh Google Font

Berikut beberapa contoh jenis huruf jika berhasil menerapkan tutorial diatas.

Font Rubik. Ukuran 16px. Ketebalan 400. Gaya normal.

Font Rubik. Ukuran 30px. Ketebalan 500. Gaya normal.

Font Rubik. Ukuran 40px. Ketebalan 700. Gaya Italic.

Font Lobster. Sering nemu ini di design banner dan brosur.

Ini adalah font bernama Pacifico. Bagus ya.

Sekian tutorial cara menggunakan Google Font di website dan blog yang semoga lengkap dan mudah dipahami.

9
Cara Memasang dan Menggunakan Google Font di Blog
Cara Memasang dan Menggunakan Google Font di Blog
Tutorial memakai huruf Google Font untuk text di website / blog beserta cara memanggilnya melalui link stylesheet. Cara menggunakan font eksternal di CSS melalui import.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

9 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • I Komang Susena
    16 Juli, 2021
    Profil: https://www.blogger.com/profile/03420667167772937244
    bang igniel mau tanya, bagaimana jika seandainya fontnya tidak ada di google font? bagaimana cara menambahkannya sehingga bisa digunakan di blog kita. Mohon dijawab, terimakasih. Saya sudah centang kotak beri tahu saya, semoga dibalas hehe
  • La Sidin
    21 Desember, 2020
    Profil: https://www.blogger.com/profile/13465444834119799778
    Tiap mau masang ngesave setelah masang kode dalam tag head selalu muncul notif begini :(
    https://1.bp.blogspot.com/-LXYByB3lY2U/X-AFvp8VZoI/AAAAAAAAHRk/SUNiwTita1A-WzDXbaCaXB9vnDpy31xtwCLcBGAsYHQ/s1098/Screenshot_79.png
  • Yuki Ari
    04 Oktober, 2019
    Profil: https://www.blogger.com/profile/15352095659481926903
    Cara menambahkan di desain tema blog gimana mbak? biar kagak manual lewat HTML mulu
  • Danny
    08 Maret, 2019
    Profil: https://www.blogger.com/profile/00248156656490909948
    Kalo mau pakai Google Prooduct Sans buat blog bisa ngga ya?
  • pamankicau team
    17 Januari, 2019
    Profil: https://www.blogger.com/profile/02470391178741143819
    Cara buat komentar kaya gini gimana mbak igniel, mohon tutornya
    • Igniel
      17 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ini cuma komentar bawaan Blogger kok.
  • Arif Santoso
    26 Agustus, 2018
    Profil: https://www.blogger.com/profile/03365865900593576473
    Cara buat daftar isi kaya di artikel ini gimana ya??
    share cara nya donk :D
    • Igniel
      09 November, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      https://www.igniel.com/2018/08/daftar-isi-table-of-contents.html
  • Putracikeusik.com
    13 Agustus, 2018
    Profil: https://www.blogger.com/profile/09259101687025023805
    Thanks infonya, sangat bermanfaat