2 Cara Mengubah Font Style (Gaya Huruf) di Blogger Template

Tutorial: Tips & Trik Solusi Cara Mengubah Font - Gaya Huruf di Template Blogger

Salah satu pembaca di sini menanyakan ke kami, "gimana sih cara merubah jenis huruf di template blogger?" Berawal dari pertanyaan itu, kami merilis Content ini.

Buat kamu yang sudah download template blogger gratis di sini; akan tetapi sayangnya gaya huruf yang digunakan tidak sesuai dengan selera dan harapan, kamu sendiri bisa kok mengubahnya.

2 Cara Mengubah Font Style (Gaya Huruf) di Blogger Template

Setidaknya ada 2 cara yang bisa kamu lakukan; tergantung kondisi template blogger yang kamu gunakan. Selain itu, kamu juga harus tahu JENIS FONT apa yang digunakan sebelumnya.

Untuk mengecek kondisi tema blogger yang kamu gunakan, -- tepatnya tempat dimana JavaScript (Js) itu harus diletakkan; caranya yaitu masuk ke Theme, dan masuk ke Edit HTML -- tempat dimana HTML, CSS, dan JavaScript tema blogger berada.

Pada tahap ini, cari kode ini: googleapis. Kurang lebih kode JavaScript (Js) yang ditampilkan seperti di bawah ini:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

...atau seperti di bawah ini:

<script type='text/javascript'>
$(function(){$(".set-1").mtabs()});
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Apabila kamu ingin mengubah Font Style di blog, maka yang perlu kamu lakukan adalah menghapus URL ini:

https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic

...dan menggantinya dengan salah satu URL Fonts Google yang bisa kamu dapatkan secara gratis di Google Fonts.

Di situs web resmi Google Fonts, kamu bisa menggunakan berbagai jenis huruf secara gratis; dimulai dari Roboto, Lato, Oswald, Raleway, Montserrat, PT Sans Serif, Arial, Tahoma, dan banyak lagi.

Masuk ke Google Fonts
Pilih salah satu diantaranya (Lato), dengan cara menekan tombol plus (+) atau tambah (+) berwarna merah
Tekan tombol Family Selected

Setelah menekan tombol Family Selected ini, kamu akan diberikan tautan situs (URL) dan kode CSS yang berfungsi menampilkan Font-Style yang ingin digunakan. Coba lihat gambar di bawah ini:

JavaScript (Js) dan CSS

Silakan salin tautan situsnya (Link) dan kode CSS di Notepad. Simpan dua buah kode JavaScript/CSS ini baik-baik di Notepad.

Sesi Terakhir Mengubah Jenis Huruf di Blogger Template

Setelah mengetahui bagaimana jenis penempatan kode JavaScriptnya, kira-kira hasil prakteknya seperti di bawah ini.

Hapus kode di bawah ini:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic' rel='stylesheet' type='text/css'>

...ganti (ubah) dengan kode ini:

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

Jika penempatan URL-nya tidak seperti itu, melainkan seperti ini:

<script type='text/javascript'>
$(function(){$(".set-1").mtabs()});
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Pada kode di atas, hapus URL di bawah ini:

https://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic

...dan ganti (ubah) dengan kode di bawah ini:

https://fonts.googleapis.com/css?family=Lato

...sehingga hasilnya (HAMPIR JADI) kurang lebih seperti di bawah ini:

<script type='text/javascript'>
$(function(){$(".set-1").mtabs()});
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Lato");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Tekan tombol Save Template!

Memanggil Font Style dengan CSS

Guna gaya huruf (Font-Style) bisa ditampilkan (berfungsi/bekerja) dengan baik di tampilan situs yang menggunakan template blogger, maka kamu harus mencari kode CSS awalnya.

Coba lihat lagi tutorial di atas; awalnya Font-Style yang digunakan adalah Roboto, lalu kita mengubah Font-Stylenya menjadi ke Lato.

Masih di dalam Theme
Cari kode (CTRL+F) dengan kata kunci "Roboto" tanpa tanda petik
Hapus semua kode Roboto ('Roboto', sans-serif)
Ganti dengan kode Font-Family Lato yang kamu dapatkan tadi ('Lato', sans-serif)
Simpan template blogger dan SELESAI

Kode CSS dari Roboto biasanya seperti ini: 'Roboto', sans-serif atau Roboto saja. Berakar dari langkah-langkah di atas; kamu hanya perlu mengganti kode Roboto yang sudah ada, dengan kode ini: 'Lato', sans-serif.

Ada hal yang mau ditanyakan, atau ada langkah yang tidak dipahami dari tutorial cara merubah Font Style blog di atas?

Labels: Tutorial Blogger

Thanks for reading 2 Cara Mengubah Font Style (Gaya Huruf) di Blogger Template. Please share this article.

2 Cara Mengubah Font Style (Gaya Huruf) di Blogger Template