Cara Mengubah Jenis Huruf (Google Fonts) di Blogger

Cara Mengubah atau Mengganti Jenis/Gaya Huruf (Google Fonts) di Blogger/Blogspot

Pada laman Google Fonts, kawan-kawan akan dengan mudahnya mendapatkan berbagai gaya atau jenis huruf yang disediakan oleh Google untuk blog yang kita gunakan. Contohnya:

• Roboto
• Lora
• Droid Sans
• Open Sans Condensed
• Poppins
• Lato
• Raleway

Semua pilihan tersebut terbagi lagi klasifikasinya menjadi Serif, Sans-serif, Display, Handwriting, dan Monospace.

Pertanyaannya adalah bagaimana caranya mengganti atau mengubah huruf blog bawaan dengan jenis huruf terbaru lewat Google Fonts?

Cara Mendapatkan (Download) Google Fonts

1. Masuk ke Google Fonts, lalu pilih Roboto (contoh... misalkan...)

2. Gulir ke bawah dan klik menu Regular 400 dengan cara menekan tombol tambah (+). Ketuk juga Bold 700 bila dirasa perlu.

3. Selanjutnya ketuk menu View Selected Families.

Sampai di momen ini, kita bisa melihat script dan kode CSS yang diperlukan.

Oke! Sekarang kita sudah mendapatkan script utama dan kodenya. Setelahnya, bagaimana cara mengimplementasikannya ke dalam blog?

Cara Mengubah Jenis Huruf (Fonts) di Blogger

Script yang dibutuhkan:

<script type='text/javascript'>
//<![CDATA[
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=Raleway:400,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Ganti teks Raleway yang sudah ditandai dengan Roboto. Hasilnya akan seperti ini:

<script type='text/javascript'>
//<![CDATA[
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,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Catatan: Angka 400 dan 700 yang dipisahkan dengan koma merupakan ketebalan huruf. Angka 400 merupakan ketebalan dengan spesifikasi normal, sedangkan 700 merupakan teks yang ditebalkan.

Setelah itu, script yang telah dimodifikasi di atas dipindahkan ke atas kode </body> pada konten template blogger. Cukup disalin (copy) dan tempel (paste).

Cara Mengaktifkan JavaScript Google Fonts

Bagaimana cara mengaktifkan JavaScript Google Fonts tersebut, sehingga tampilan huruf yang sudah ditambahkan menyesuaikan ke tampilan blog?

Cari salah satu kode berikut:

.post-body

.post

.body

main-wrapper

body,.body-fauxcolumn-outer

Biasanya sudah terpasang kode bawaan dari template blogger seperti font-family: Arial atau font: 14px Arial atau font: 14px Arial, sans-serif.

Di sinilah titik temunya. Cukup disesuaikan dengan CSS dari jenis huruf yang telah kita temukan tadi di laman web Google Fonts. Contohnya:

font-family: 'Roboto', sans-serif

Atau bisa juga menggunakan jenis huruf lainnya seperti Noto Sans Japanese yang sedang saya gunakan saat ini, yakni:

<script type='text/javascript'>
//<![CDATA[
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=Noto+Sans+JP:400,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Dengan kode CSS sebagai pemanggilnya:

font-family: 'Noto Sans JP', sans-serif;

Cukup mudah, kan? Pada langkah terakhir, silakan ketuk tombol simpan pada perubahan template blogger yang sudah dilakukan. Ok selesai.

Cara Menggabungkan 2 Jenis Huruf Google Fonts

Bagaimana cara menggabungkan dua jenis huruf Google Fonts di dalam satu script -- tanpa harus menggandakan script yang dimaksud? Bisa diterapkan lewat model begini:

<script type='text/javascript'>
//<![CDATA[
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|Raleway:400,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]></script>

Keduanya cukup dipisahkan dengan garis tegak | tanpa ada tambahan kode-kode lainnya. Ok selesai.

Mungkin ada yang bertanya, kenapa kedua Google Fonts tersebut digabungkan atau menggunakan 2 jenis huruf sekaligus di dalam satu template blogger? Saya pribadi punya alasan tersendiri. Satu jenis huruf digunakan untuk gaya tulisan artikel. Sedangkan satunya lagi diperuntukkan untuk tampilan huruf pada judul postingan blog. Supaya lebih berwarna 😄

Arief Ghozaly Konten kreator artikel (writer/creator) sejak 2015.

Berbagi :