Tampilan blog yang menarik tidak hanya ditentukan oleh warna template atau layout saja, tetapi juga jenis font yang digunakan. Banyak pemilik blog sering mengabaikan pemilihan font padahal hal tersebut sangat berpengaruh terhadap kenyamanan pembaca saat membaca artikel.
Dalam dunia blogging modern, penggunaan font yang tepat bisa membuat artikel terlihat lebih profesional, mudah dibaca, dan meningkatkan pengalaman pengguna atau User Experience (UX). Bahkan dari sisi SEO, Google juga lebih menyukai website yang nyaman digunakan pengunjung.
Karena itulah banyak blogger mulai mengganti font bawaan template Blogger dengan jenis huruf yang lebih modern seperti Poppins, Roboto, Inter, Open Sans, hingga Nunito.
Selain membuat tampilan lebih menarik, mengganti font juga bisa membantu membangun identitas visual blog agar terlihat lebih unik dibanding blog lainnya.
Kabar baiknya, cara mengganti font di template Blogger sebenarnya cukup mudah dilakukan bahkan untuk pemula sekalipun. Kamu hanya perlu menambahkan kode font tertentu ke dalam template Blogger lalu mengganti bagian CSS font-family.
Artikel ini akan membahas secara lengkap cara mengganti font di template Blogger mulai dari memilih font terbaik, menambahkan Google Fonts, mengganti CSS font-family, hingga tips memilih font yang SEO friendly dan nyaman dibaca.
Kenapa Font Sangat Penting untuk Blog?
Banyak orang fokus mempercantik tampilan blog menggunakan gambar dan warna, tetapi lupa bahwa font adalah bagian yang paling sering dilihat pembaca.
Setiap artikel yang kamu tulis akan dibaca menggunakan font tersebut. Jika font terlalu kecil, sulit dibaca, atau terlihat berantakan, pengunjung biasanya akan cepat meninggalkan blog.
Sebaliknya, penggunaan font yang rapi dan nyaman dapat membuat pembaca lebih betah membaca artikel dalam waktu lama.
Blog dengan font yang nyaman biasanya memiliki pengalaman membaca yang lebih baik terutama di smartphone. Hal ini penting karena sebagian besar pengunjung Blogger sekarang berasal dari perangkat mobile.
Beberapa manfaat menggunakan font yang tepat di Blogger antara lain:
- Membuat artikel lebih nyaman dibaca
- Tampilan blog terlihat lebih modern
- Meningkatkan User Experience
- Membantu menurunkan bounce rate
- Membuat blog terlihat lebih profesional
- Mendukung tampilan mobile friendly
Karena alasan itulah banyak template Blogger modern mulai menggunakan font dari Google Fonts yang lebih ringan dan responsif.
Apa Itu Google Fonts?
Google Fonts adalah layanan font gratis dari Google yang memungkinkan pengguna menggunakan berbagai jenis huruf modern untuk website.
Layanan ini cukup populer karena mudah digunakan, ringan, dan mendukung hampir semua browser modern.
Selain itu, Google Fonts juga sering digunakan oleh developer website karena performanya cukup baik untuk optimasi kecepatan halaman.
Banyak template Blogger premium maupun gratis juga menggunakan Google Fonts karena pilihan jenis hurufnya sangat banyak dan mudah dikustomisasi.
Beberapa font populer yang sering digunakan blogger antara lain:
- Poppins
- Roboto
- Open Sans
- Inter
- Montserrat
- Nunito
- Lato
- Work Sans
Masing-masing font memiliki karakter tampilan yang berbeda sehingga kamu bisa memilih sesuai desain template Blogger yang digunakan.
Font Blogger yang Nyaman Dibaca
Sebelum mengganti font di Blogger, penting untuk mengetahui jenis font yang nyaman digunakan untuk artikel panjang.
Blog yang berisi tutorial atau artikel informatif biasanya lebih cocok menggunakan font yang sederhana dan mudah dibaca.
Berikut beberapa rekomendasi font Blogger yang cukup populer:
1. Poppins
Poppins memiliki tampilan modern dan bersih sehingga cocok untuk blog teknologi, tutorial, dan website modern.
2. Roboto
Roboto adalah salah satu font paling populer karena tampilannya sederhana dan sangat nyaman dibaca di desktop maupun smartphone.
3. Open Sans
Open Sans cocok digunakan untuk artikel panjang karena bentuk hurufnya cukup jelas dan tidak melelahkan mata.
4. Inter
Inter banyak digunakan website modern karena terlihat rapi dan profesional terutama untuk tampilan mobile.
5. Nunito
Nunito memiliki bentuk huruf sedikit membulat sehingga terasa lebih santai dan nyaman dibaca.
Cara Mengganti Font di Template Blogger
Berikut langkah-langkah lengkap mengganti font di Blogger menggunakan Google Fonts.
1. Pilih Font dari Google Fonts
Pertama buka website Google Fonts lalu pilih jenis font yang ingin digunakan.
Contoh kita akan menggunakan font Poppins.
Biasanya Google Fonts menyediakan kode seperti berikut:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
Kode tersebut digunakan untuk memanggil font dari server Google Fonts.
2. Masuk ke Dashboard Blogger
Setelah menentukan jenis font yang ingin digunakan, langkah berikutnya adalah membuka halaman edit template Blogger agar kamu bisa menambahkan kode font ke dalam tema blog.
Login terlebih dahulu ke dashboard Blogger menggunakan akun Google yang terhubung dengan blog kamu. Setelah berhasil masuk, pilih blog yang ingin diedit lalu buka menu:
- 📂 Tema
- 🛠️ Edit HTML
Menu Edit HTML digunakan untuk mengakses seluruh struktur kode template Blogger mulai dari HTML, CSS, JavaScript, hingga pengaturan tampilan lainnya.
Jika kamu baru pertama kali membuka Edit HTML, tampilannya mungkin terlihat cukup banyak dan membingungkan karena berisi ribuan baris kode template. Namun tidak perlu khawatir, kamu hanya perlu mencari bagian tertentu saja.
Setelah masuk ke halaman Edit HTML, cari bagian berikut menggunakan fitur pencarian browser:
<head>
Bagian <head> adalah tempat yang biasanya digunakan untuk menyimpan berbagai kode penting seperti:
- Meta tag SEO
- CSS template
- Script JavaScript
- Kode Google Fonts
- Verifikasi Google Search Console
Untuk mempermudah pencarian kode di dalam template Blogger, kamu bisa menggunakan fitur pencarian cepat di browser atau editor HTML dengan menekan tombol CTRL + F di PC maupun menu Find in page di HP. Dengan fitur ini, kamu dapat menemukan kode seperti <head>, font-family, atau bagian CSS lainnya dengan lebih cepat tanpa harus scroll manual. Jika kamu masih bingung membaca struktur template Blogger, silakan pelajari panduan lengkap berikut:
Panduan Melihat Struktur Template Blogger Menggunakan view-source.
- 📱 Android : tekan ikon titik tiga lalu pilih Temukan di halaman
- 💻 Laptop/PC : tekan tombol CTRL + F
Kemudian ketik:
<head>Jika sudah ditemukan, letakkan cursor tepat di bawah kode tersebut karena nantinya bagian itu akan digunakan untuk menempelkan kode Google Fonts.
<head>, berarti kamu sudah siap memasang kode font baru di template Blogger.
3. Tempelkan Kode Google Fonts
Paste kode Google Fonts tepat di bawah tag:
<head>Contoh:
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
4. Cari Kode CSS Font Blogger
Langkah berikutnya adalah mencari bagian CSS yang mengatur font template Blogger.
Biasanya kode seperti:
body{
font-family: Arial,sans-serif;
}
Atau:
font-family: var(--font-body);
5. Ganti Menjadi Font Baru
Ubah bagian font-family menjadi:
body{
font-family: 'Poppins',sans-serif;
}
Jika template menggunakan banyak class CSS, kamu juga bisa mengganti bagian heading:
h1,h2,h3,h4,h5,h6{
font-family: 'Poppins',sans-serif;
}
Setelah selesai klik tombol:
Simpan TemaCara Mengganti Font Blogger Lewat HP
Saat ini banyak pengguna Blogger yang lebih sering mengedit template langsung dari smartphone dibanding laptop.
Untungnya, mengganti font Blogger lewat HP tetap bisa dilakukan selama browser mendukung mode desktop.
- Buka browser Chrome
- Aktifkan mode Desktop Site
- Login ke Blogger
- Masuk ke menu Tema
- Pilih Edit HTML
- Tambahkan kode Google Fonts
- Ganti CSS font-family
- Klik Simpan Tema
Jika editor HTML terasa berat, gunakan browser versi terbaru agar proses edit template lebih lancar.
Cara Mengganti Font Tanpa Edit HTML
Beberapa template Blogger modern memungkinkan pengguna mengganti font tanpa edit HTML langsung.
Caranya:
- Masuk ke Tema
- Pilih Sesuaikan
- Buka bagian Font
- Pilih jenis huruf
- Simpan perubahan
Namun fitur ini biasanya terbatas hanya pada template tertentu saja.
Contoh Kombinasi Font Blogger yang Bagus
Agar tampilan blog terlihat lebih profesional, kamu juga bisa menggunakan kombinasi font berbeda antara heading dan isi artikel.
Kombinasi 1
Heading : Poppins
Body : Roboto
Kombinasi 2
Heading : Montserrat
Body : Open Sans
Kombinasi 3
Heading : Inter
Body : Nunito
Kombinasi tersebut cukup populer digunakan pada blog modern karena terlihat rapi dan nyaman dibaca.
Tips Kombinasi Ukuran Font dan Line Height
Selain jenis font, ukuran huruf dan jarak antar baris juga sangat mempengaruhi kenyamanan membaca artikel di Blogger.
Agar artikel lebih nyaman dibaca, gunakan ukuran font minimal 16px dengan line-height sekitar 1.7 sampai 1.9.
body{
font-family:'Poppins',sans-serif;
font-size:16px;
line-height:1.8;
color:#333;
}
Untuk heading artikel biasanya ukuran dibuat lebih besar agar struktur konten terlihat lebih jelas.
h1{
font-size:32px;
}
h2{
font-size:26px;
}
h3{
font-size:22px;
}
Tips Memilih Font Blogger yang SEO Friendly
Tidak semua font cocok digunakan untuk website. Beberapa font dekoratif memang terlihat unik tetapi kurang nyaman untuk artikel panjang.
Berikut beberapa tips memilih font Blogger:
- Gunakan font yang mudah dibaca
- Hindari font terlalu tipis
- Gunakan ukuran font minimal 16px
- Pilih line-height yang nyaman
- Gunakan font ringan agar loading cepat
- Hindari terlalu banyak jenis font
Selain itu, gunakan font modern yang sudah mobile friendly agar tampilan tetap nyaman di smartphone.
Apakah Mengganti Font Bisa Mempengaruhi SEO?
Secara langsung, mengganti font tidak membuat ranking website naik. Namun dari sisi pengalaman pengguna, font sangat berpengaruh terhadap kenyamanan membaca.
Jika pengunjung nyaman membaca artikel, biasanya mereka akan menghabiskan waktu lebih lama di blog kamu.
Hal tersebut dapat membantu meningkatkan kualitas interaksi pengguna yang menjadi salah satu faktor penting dalam optimasi website modern.
Karena itu pemilihan font tetap penting untuk mendukung kualitas SEO secara keseluruhan.
Apakah Font Berat Bisa Membuat Blogger Lambat?
Ya, penggunaan font yang terlalu banyak memang bisa mempengaruhi kecepatan loading Blogger terutama pada koneksi internet lambat.
Karena itu sebaiknya gunakan maksimal 1 sampai 2 jenis font saja agar performa blog tetap ringan.
Selain itu, hindari memanggil terlalu banyak variasi ketebalan font.
wght@400;500;600;700
Cara ini membantu menjaga performa Blogger tetap cepat dan SEO friendly.
Kenapa Font Blogger Tidak Berubah?
Sebagian pengguna kadang mengalami masalah ketika font Blogger tidak berubah meskipun kode sudah dipasang.
Hal ini biasanya disebabkan oleh beberapa faktor berikut:
- Cache browser belum diperbarui
- Kode Google Fonts salah penempatan
- CSS tertimpa kode lain
- Salah menulis nama font
- Template menggunakan variable CSS tertentu
Untuk mengatasinya, coba refresh browser atau gunakan mode incognito lalu cek kembali tampilan blog.
Kesalahan Umum Saat Mengganti Font Blogger
Masih banyak blogger pemula yang melakukan kesalahan saat mengganti font template Blogger.
Berikut beberapa kesalahan yang cukup sering terjadi:
- Menggunakan terlalu banyak jenis font
- Ukuran font terlalu kecil
- Warna font kurang kontras
- Menggunakan font dekoratif untuk artikel
- Salah menempatkan kode Google Fonts
- Tidak menyimpan backup template
Sebelum mengedit template Blogger, sebaiknya lakukan backup terlebih dahulu agar aman jika terjadi error.
Tips Agar Tampilan Blog Lebih Profesional
Selain mengganti font, ada beberapa hal lain yang juga bisa membantu membuat tampilan Blogger terlihat lebih modern.
- Gunakan warna yang konsisten
- Atur jarak antar paragraf
- Gunakan heading yang rapi
- Optimalkan tampilan mobile
- Gunakan gambar WebP
- Percepat loading blog
Kombinasi desain sederhana dan font yang nyaman biasanya lebih disukai pengunjung dibanding tampilan terlalu ramai.
Kesimpulan
Mengganti font di template Blogger adalah salah satu cara paling mudah untuk membuat tampilan blog terlihat lebih modern, profesional, dan nyaman dibaca.
Dengan menggunakan Google Fonts seperti Poppins, Roboto, atau Inter, tampilan artikel bisa terlihat lebih rapi baik di desktop maupun smartphone.
Selain meningkatkan kenyamanan pembaca, penggunaan font yang tepat juga membantu meningkatkan pengalaman pengguna secara keseluruhan.
Pastikan kamu menggunakan font yang ringan, mudah dibaca, dan sesuai dengan tema blog agar performa website tetap optimal.
Jika dilakukan dengan benar, perubahan kecil seperti mengganti font ternyata bisa membuat tampilan Blogger terlihat jauh lebih profesional dibanding sebelumnya.
FAQ Seputar Mengganti Font Blogger
Apakah mengganti font Blogger aman?
Ya, mengganti font Blogger aman dilakukan selama kode dipasang dengan benar dan tidak merusak struktur template.
Font apa yang paling bagus untuk Blogger?
Beberapa font populer untuk Blogger antara lain Poppins, Roboto, Open Sans, Inter, dan Nunito karena nyaman dibaca dan mobile friendly.
Apakah Google Fonts mempengaruhi kecepatan blog?
Google Fonts relatif ringan digunakan, tetapi sebaiknya jangan menggunakan terlalu banyak jenis font agar loading blog tetap cepat.
Bagaimana cara mengembalikan font Blogger seperti semula?
Kamu bisa menghapus kode Google Fonts dan mengembalikan CSS font-family ke pengaturan default template Blogger.
