Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mengganti Model Font Blogger Menggunakan Google Fonts

RudiEtnovian.Com - Setelah sekian lama menggeluti dunia blogger, saya yakin ada masanya kita bosan dengan tampilan blog kita sendiri. Hal seperti ini sudah sangat lumrah, apalagi kalau memang adminnya mempunyai sifat bosenan.

Saya sendiri pernah melalui masa-masa seperti itu. Selalu ingin mencoba hal-hal baru yang saya temui, baik hanya sekedar untuk mencoba atau pun untuk improvisasi pengalaman dalam dunia per-blogger-an.

Cara Mengganti Model Font Blogger Menggunakan Google Fonts
Google Fonts

Nah, didasari oleh pengalaman tersebut, pada kesempatan kali ini saya akan kembali share Tutorial Blogging yang cukup simpel yang bisa digunakan untuk mengubah tampilan dari blog kita.

Untuk kali ini yang kita bahas adalah dari sisi font atau model huruf dari keseluruhan isi blog mulai dari header sampai footer. Kali ini kita akan mengubah tampilan model huruf pada blog menggunakan model huruf dari google fonts.

Berikut step by step Cara Mengganti Model Font Blogger Menggunakan Google Fonts tersebut.

  • Login ke akun blogger.
  • Masuk ke menu Tema, pilih Edit HTML. Setiap kali akan mengedit template jangan lupa untuk backup templatenya terlebih dahulu.
  • Buka halaman Google Fonts di tab baru.
  • Lalu tambahkan kode Javascript di bawah ini tepat di bawah kode <head>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>

Jika sudah ada, maka tidak perlu ditambahkan lagi. Langsung masuk ke langkah berikutnya.

Ganti tulisan yang berwarna merah tersebut dengan nama font yang akan teman-teman gunakan. Untuk melihat model-model Google Fonts yang tersedia, silahkan lihat di halaman Google Fonts tadi.

Sebagai contoh, kita akan gunakan yang "Langar". Maka Javascript tadi diganti menjadi seperti yang dibawah ini.

<link href="https://fonts.googleapis.com/css?family=Langar" rel="stylesheet"/>

Berikut ini adalah cara memilih dan melihat nama Google Fonts tersebut.

  • Buka halaman Google Fonts.
  • Pilih model font yang akan digunakan, dalam contoh kita pilih Langar.
  • Lalu klik tanda "+ Select This Style".
  • Pilih model huruf yang ingin digunakan.
  • Lalu lihat nama font nya.
Cara Mengganti Model Font Blogger Menggunakan Google Fonts


Cara Mengganti Model Font Blogger Menggunakan Google Fonts


Cara Mengganti Model Font Blogger Menggunakan Google Fonts

  • Setelah selesai dengan Javascript Google Fonts, sekarang kita masuk ke CSS penyusun jenis huruf pada tampilan blog.
  • Silahkan teman-teman cari kode CSS seperti yang di bawah ini. Kalau tidak ada silahkan cari yang semisalnya, karena setiap template biasanya memiliki kodenya masing-masing dan biasanya tidak akan jauh berbeda.
body {background:#f0f0f0 none repeat scroll top left;
margin:0 0 0 0;
padding:0 0 0 0;
color:#000000;
font:normal normal 14.7px Arial, sans-serif;
text-align:left;
}

  • Setelah ketemu kode CSS penyusun model huruf template blognya, silahkan ganti tulisan yang berwarna merah tersebut dengan nama Google Fonts yang telah teman-teman dapat dari halaman Google Fonts tadi.
  • Setelah semua selesai silahkan simpan hasil editing templatenya.

Jika teman-teman mengikuti step by step Cara Mengganti Model Font Blogger Menggunakan Google Fonts tersebut dengan benar. Maka seharusnya tampilan model huruf blog teman-teman semua akan berubah.

DemikianlahTutorial Blogger tentang Cara Mengganti Model Font Blogger Menggunakan Google Fonts tersebut.

Semoga bisa bermanfaat dan jangan lupa untuk melihat Tutorial Blogger lainnya disini.


Rudi Etnovian Hadi Kurniawan
Rudi Etnovian Hadi Kurniawan Agen HNI HPAI Sekaligus Seorang Blogger dan Menyediakan Jasa Pembuatan Website Sejak Tahun 2008