Cara Ganti Huruf (Font) di Blog - Anti Render-Blocking CSS & JavaScript

Inilah cara mengubah, menukar, atau mengganti gaya dan jenis huruf (fonts) di blog blogger.com.

Cara Ganti Huruf (Font) di Blog - Anti Render-Blocking CSS & JavaScript

Sesudah membuat artikel Cara Pasang Google Fonts & Font Awesome di Blog, saya baru sadar kalau blog ini belum pernah memposting tutorial cara mengganti font di blog ๐Ÿ˜

Cara Ganti Jenis Huruf (Font) di Blog


1. Pada langkah pertama, masuk ke Google Fonts, lalu pilih salah satu font yang diinginkan.

Cara Ganti Huruf (Font) di Blog - Anti Render-Blocking CSS & JavaScript

Perhatian: di sini saya memilih font yang dinamakan Raleway, salah satu Google Fonts favorit saya! ๐Ÿ˜

2. Pilih fontnya, lalu pilih menu Get Font di sebelah kanan atas, selanjutnya pilih Get embed code.

Cara Ganti Huruf (Font) di Blog - Anti Render-Blocking CSS & JavaScript

3. Di momen ini, salin teks: Raleway, untuk ditambahkan di sela2 kode di bawah 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=Raleway:400,700");
//]]>
</script>

Cara Ganti Huruf (Font) di Blog - Anti Render-Blocking CSS & JavaScript

Perhatian: adapun angka :400,700 ialah ketebalan huruf yang ditampilkan nantinya.

4. Selanjutnya, copas kode script di atas (langkah No. 3), di atas kode </body> yang ada di dalam template blogger.

5. Masuk ke template blogger, cari salah satu kode berikut ini:

--fontBody:
body{font:
body{background:#ffffff;color:#575757;font-family:Roboto,Arial,sans-serif}
.post-body{

6. Jika salah satunya menampilkan Google Fonts dengan nama lain, ganti dengan ini:

"Raleway", sans-serif

Contohnya:

body{background:#ffffff;color:#575757;font-family:"Raleway", sans-serif}

Bisa juga ditambahkan atau disesuaikan seperti ini, tergantung masing2 template blogger:

.post-body{
font-family: "Raleway", sans-serif;
font-size: 16px;
font-weight: 400;
}

Terkait langkah No. 6 ini, jika memang membingungkan, silakan bertanya di kolom komentar. Nanti dibantu! ๐Ÿ˜‰
Labels: Blogger,
Terima kasih sudah membaca Cara Ganti Huruf (Font) di Blog - Anti Render-Blocking CSS & JavaScript! Bagikan artikelnya, ya!

Main Blog SEO
Main Blog SEO Blogger sejak 2014. Teknik Komputer dan Jaringan (TKJ) Tahun 2012.

Posting Komentar untuk "Cara Ganti Huruf (Font) di Blog - Anti Render-Blocking CSS & JavaScript"