Cara Menggunakan Google Fonts di Blog Blogger

Cara Menggunakan Google Fonts di Blogger

Font memiliki pengaruh besar pada keseluruhan daya tarik visual untuk sebuah blog. Platform Blogger / Blogspot sudah hadir dengan lebih dari 98 font yang berbeda yang bisa dipilih dan Anda gunakan.

Namun, jika Anda tidak puas dengan berbagai macam font yang disediakan oleh pihak Blogger, Anda mungkin bisa untuk mencoba dan melihat font yang disediakan oleh Google Fonts. Google Fonts memiliki koleksi lebih dari 915 font dan itu semua gratis untuk digunakan tanpa batasan apa pun.

Pada artikel ini, saya akan memandu Anda bagaimana cara menambahkan font dari Google Fonts di blog Blogspot.

Mari simak!

Proses mendapatkan font Google Fonts agar bisa berfungsi di blog Blogspot Anda ringkasnya dapat dilakukan dalam dua langkah saja:
  1. Tambahkan font dari Google Font ke blog Blogger.
  2. Gunakan Google Font yang sudah ditambahkan.
Mari kita bahas detail tentang bagaimana cara melakukannya.

Cara Menambahkan Font di Blogger dari Google Fonts

Pertama-tama, kunjungi situs web Google Fonts di sini. Anda akan melihat ratusan font ditampilkan di halaman web.Google yang mana mereka telah melakukan pekerjaan yang luar biasa sehingga membuat kita lebih mudah untuk menelusuri dan melihat pratinjau font.

google fonts

Berhati-hatilah agar tidak tersesat di antara segudang font dari google yang disediakan untuk mencari font yang sempurna!

Setelah Anda menemukan font yang Anda sukai, klik font tersebut. Setelah muncul halaman baru pada sudut kanan bagian atas klik tombol "+ Select this style" di samping font. Sebuah jendela kecil disamping kanan akan muncul dengan kode-kode yang perlu Anda tambahkan ke blog. Pilih pada tab Embed untuk melihat kodenya.

Pada gambar di bawah, saya telah memilih font bernama "Gugi".

Cara menambahkan google fonts di blogger

Sekarang Anda perlu menambahkan kode yang didapat tersebut ke kode HTML tema blog Blogger Anda. Salin kode pertama dan buka dasbor Blogger Anda > Tema > Edit HTML dan cari “</head>”.

Untuk mencari tag penutup kepala “</head>” di kode tema, klik di suatu tempat pada kode yang terlihat disanan dan kemudian tekan kombinasi tombol “Ctrl + f” di Windows atau “Command + f” di macOS. Nantinya kotak pencarian akan muncul di bagian atas.

Tempel kode yang kita salin sebelumnya tepat sebelum atau diatas kode "</head>" seperti yang ditunjukkan pada gambar di bawah ini.

Cara menggunakan google fonts di blogger

Klik tombol Save theme untuk menyimpan perubahan.

Font sekarang sudah berhasil ditambahkan ke blog Anda dan file font akan dimuat saat blog dibuka di browser. Sekarang kita perlu memberi tahu browser web untuk menggunakan font ini.

Cara Menggunakan Google Font di Blogger

Kita perlu memberi tahu browser web untuk menggunakan font yang tadi ditambahkan dari Google Fonts. Untuk itu, kita perlu menentukan beberapa kode CSS. Dengan bantuan kode CSS, nantinya kita dapat menargetkan elemen tertentu untuk menggunakan font yang sudah ditambahkan.

Untuk menambahkan kode CSS ke blog Blogger, buka dasbor Blogger > Tema> Kustomisasi> Lanjutan > Tambahkan CSS.

Jika Anda ingin seluruh blog menggunakan font "Gugi" yang saya tambahkan ke blog, saya akan menambahkan kode berikut di kotak CSS khusus di Blogger.

body {
font-family: 'Gugi', cursive;
}
Untuk menentukan hanya judul postingan blog saja yang menggunakan font khusus ini, gunakan kode berikut:

.post-title { 
font-family: 'Gugi', cursive; 
}
Untuk menerapkan font hanya pada badan (body) postingan blog, gunakan kode berikut.

.post-body { 
font-family: 'Gugi', cursive; 
}
Klik tombol Terapkan ke Blog untuk menyimpannya.

Nah, Itu dia! Blog Anda sekarang harusnya sudah memuat font yang ditambahkan tadi.

Kesimpulan

Saya harap panduan ini bermanfaat bagi Anda untuk bisa menambahkan Google Fonts ke blog Blogger / Blogspot Anda.

Untuk tips dan panduan lebih lanjut terkait dengan blogging, jangan ragu untuk kembali berkunjung ke web yang sederhana ini. Pastinya setiap hari every single day, saya akan tetap membagikan tips dan panduan mengenai blogging di blog ini.

Hiraukan jika saya sibuk atau sakit! Itu sudah diluar kendali.
Afindo Kei Sudah mendalami dunia blogging semenjak tahun 2015 silam. Hasil? Ahh KEPO!

0 Response to "Cara Menggunakan Google Fonts di Blog Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel