Beranda / BLOGGER

Cara Memasang dan Menggunakan Google Font di Blog

Posting Komentar

Cara Memasang dan Menggunakan Google Font di Blog

Cara Menggunakan Google Font Melalui CSS di Blog dan Website




Daftar isi

  • 1. Pengenalan

  • 2. Pilih Font

  • 3. Tambahkan Script Ke Blog

    • 3.1. Melalui Script Standar

    • 3.2. Melalui Import CSS


  • 4. Cara Menggunakan Google Font

  • 5. Contoh Google Font



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



Baca Juga: Cara Memasang dan Menggunakan Font Awesome Untuk Membuat Ikon di Blog


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.




















Anda mungkin menyukai postingan ini

Tidak ada komentar untuk "Cara Memasang dan Menggunakan Google Font di Blog"

Posting Komentar