Google Fonts merupakan platform yang sangat berguna bagi Anda yang ingin memodifikasi tampilan tema Blogger. Google Fonts menyediakan berbagai macam jenis font yang dapat digunakan secara gratis untuk mempercantik tampilan blog.
Font dari Google Fonts juga cukup mudah diterapkan pada website atau blog. Selain memiliki banyak pilihan font, Google Fonts menyediakan berbagai gaya dan ketebalan font yang dapat disesuaikan dengan kebutuhan.
Dengan menggunakan Google Fonts, Anda dapat mengubah tampilan tulisan pada blog agar terlihat lebih menarik tanpa harus membuat atau mengunduh font sendiri.
Cara Memasang Google Fonts di Blogger
Untuk menggunakan Google Fonts pada Blogger, Anda perlu mengambil kode font yang ingin digunakan terlebih dahulu. Berikut langkah-langkahnya.
1. Buka Google Fonts
Pertama, buka situs Google Fonts melalui browser.
2. Pilih Font yang Diinginkan
Setelah halaman Google Fonts terbuka, cari font yang ingin digunakan pada blog.
Sebagai contoh, pada tutorial ini saya menggunakan font Oswald.
Anda dapat menggunakan kolom pencarian untuk menemukan font tertentu atau memilih font yang tersedia sesuai kebutuhan.
3. Pilih Font
Setelah menemukan font yang diinginkan, buka halaman font tersebut. Kemudian pilih opsi Get Font.
4. Pilih Get Embed Code
Selanjutnya, pilih Get Embed Code untuk mendapatkan kode yang nantinya akan dipasang pada template Blogger.
5. Pilih Kode Web
Pada bagian pilihan penggunaan font untuk web, pilih Web.
Kemudian pilih metode @import dan salin kode CSS yang diberikan oleh Google Fonts.
Kode tersebut nantinya akan digunakan untuk memanggil font pada template Blogger.
6. Masukkan Kode ke Template Blogger
Selanjutnya, masuk ke dashboard Blogger.
Pilih:
Tema → Edit HTML
Cari kode:
</head>
Kemudian letakkan kode Google Fonts yang sudah disalin sebelumnya sebelum kode tersebut.
Contohnya:
<style>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&display=swap');
</style>
Perlu diperhatikan bahwa kode yang diberikan Google Fonts dapat berbeda tergantung font dan ketebalan yang Anda pilih. Sebaiknya gunakan kode yang diberikan langsung oleh Google Fonts.
7. Simpan Tema
Setelah kode selesai ditambahkan, klik Simpan untuk menyimpan perubahan pada template Blogger.
Sampai tahap ini, font Google Fonts sudah dipanggil oleh template Blogger. Namun, font tersebut belum otomatis digunakan pada seluruh bagian blog.
Cara Menggunakan Google Fonts di Blogger
Setelah font berhasil dipasang, Anda dapat menggunakannya pada bagian tertentu dari blog menggunakan CSS.
Sebagai contoh, kita akan menggunakan font Oswald untuk judul sidebar.
1. Buka Editor HTML Tema
Masuk kembali ke:
Blogger → Tema → Edit HTML
Kemudian cari kode CSS yang mengatur judul sidebar.
Pada beberapa template Blogger, kode tersebut dapat terlihat seperti berikut:
.sidebar h2 {
font-family: Roboto;
font-size: 16px;
font-weight: 700;
font-style: normal;
}
Perlu diketahui bahwa setiap template Blogger memiliki struktur CSS yang berbeda. Jadi, kode untuk judul sidebar pada template Anda mungkin tidak sama persis dengan contoh di atas.
2. Ganti Jenis Font
Pada contoh tersebut terdapat:
font-family: Roboto;
Ganti Roboto dengan Oswald sehingga menjadi:
.sidebar h2 {
font-family: Oswald;
font-size: 16px;
font-weight: 700;
font-style: normal;
}
Dengan demikian, judul sidebar akan menggunakan font Oswald.
3. Simpan Perubahan
Setelah selesai mengubah kode CSS, klik Simpan.
Kemudian buka blog Anda untuk melihat hasil perubahan font.
Penjelasan Kode CSS
Berikut fungsi dari beberapa properti CSS yang digunakan pada contoh di atas.
font-family: Oswald;
Digunakan untuk menentukan jenis font yang digunakan. Pada contoh ini, font yang digunakan adalah Oswald.
font-size: 16px;
Digunakan untuk menentukan ukuran tulisan. Semakin besar nilai yang digunakan, semakin besar ukuran font.
font-weight: 700;
Digunakan untuk mengatur ketebalan tulisan. Nilainya umumnya berada pada rentang 100 hingga 900, tergantung dukungan font yang digunakan.
Semakin besar nilainya, biasanya semakin tebal tulisan.
font-style: normal;
Digunakan untuk menentukan gaya tulisan. Nilai normal membuat tulisan tampil normal, sedangkan italic dapat digunakan untuk membuat tulisan menjadi miring.
Contohnya:
font-style: italic;
Tips Menggunakan Google Fonts di Blogger
Sebaiknya jangan menggunakan terlalu banyak jenis font dalam satu blog. Penggunaan banyak font dapat membuat tampilan blog menjadi kurang konsisten dan berpotensi menambah beban halaman.
Pilih satu atau dua jenis font yang sesuai dengan desain blog. Misalnya, satu font digunakan untuk judul dan satu font lainnya digunakan untuk isi artikel.
Selain itu, pilih hanya ketebalan font yang benar-benar diperlukan. Jika Anda hanya menggunakan font dengan ketebalan 400 dan 700, tidak perlu memuat terlalu banyak variasi ketebalan.
Kesimpulan
Google Fonts dapat menjadi salah satu cara sederhana untuk mempercantik tampilan blog Blogger. Dengan banyaknya pilihan font yang tersedia, Anda dapat menyesuaikan jenis tulisan dengan desain dan karakter blog.
Cara memasangnya juga cukup mudah. Anda hanya perlu memilih font di Google Fonts, mengambil kode embed, memasukkannya ke template Blogger, kemudian menggunakan nama font tersebut pada CSS.
Semoga tutorial cara memasang Google Fonts di Blogger ini dapat membantu Anda yang ingin memodifikasi tampilan blog agar menjadi lebih menarik.
FAQ
Apa itu Google Fonts?
Google Fonts adalah layanan yang menyediakan berbagai jenis font yang dapat digunakan secara gratis pada website dan blog, termasuk Blogger.
Apakah Google Fonts bisa digunakan di Blogger?
Ya. Google Fonts dapat digunakan pada Blogger dengan menambahkan kode font ke dalam template HTML tema, kemudian menerapkannya menggunakan CSS.
Bagaimana cara memasang Google Fonts di Blogger?
Pilih font di Google Fonts, gunakan opsi Get Embed Code, salin kode yang diberikan, lalu masukkan kode tersebut ke dalam template Blogger sebelum kode </head>.
Apakah semua font Google Fonts gratis?
Sebagian besar font yang tersedia di Google Fonts dapat digunakan secara gratis dan bersifat open source. Namun, tetap perhatikan lisensi font yang digunakan untuk kebutuhan tertentu.
Bagaimana cara menggunakan Google Fonts pada judul sidebar?
Setelah font dipasang, Anda dapat menggunakan properti CSS font-family pada selector judul sidebar. Contohnya, font-family: Oswald;.
Apakah terlalu banyak Google Fonts dapat memengaruhi blog?
Ya. Memuat terlalu banyak jenis font atau variasi ketebalan font dapat menambah sumber daya yang harus dimuat halaman. Sebaiknya gunakan font dan variasi ketebalan seperlunya.
Komentar
Posting Komentar