Cara Pasang Google Fonts & Font Awesome di Blog

Inilah cara membuat, memasang, atau menambahkan Google Fonts dan Font Awesome di blog blogger.com.

Sebenarnya, Google Fonts dan Font Awesome adalah 2 hal yang berbeda. Sengaja saya masukkan keduanya ke dalam 1 artikel karena yang dibahas adalah cara menambahkannya, lalu menggabungkan keduanya 😉

Biasanya, jika kita ingin menambahkan Google Fonts di template blogger, langsung dengan cara copas kode di bawah ini, di atas kode </head>

<link href='https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&amp;display=swap' rel='stylesheet'/>

Begitu, kan? Masalahnya, link itulah yang membuat file CSS jadi terhambat, yang membuat loading blog terasa berat. Istilahnya, Render-Blocking CSS dan JavaScript (JS).

Dulu, bisa diatasi dengan kode @font-face seperti ini:

@font-face {font-family: 'Museo'; src: url('https://cdn.rawgit.com/mikaelbr/simplify-playbutton/a0f8e711/public/stylesheets/museo/museo-300-webfont.woff') format('woff'); font-weight: 300; font-style: normal;}

Masalahnya lagi, kebanyakan browser bermasalah dengan si kode @font-face ini.

Cara Pasang Google Fonts & Font Awesome di Blog

Untuk mengatasi Render-Blocking CSS dan JavaScript di blog -- yang menyebabkan loading blog menjadi lambat, kita harus memasangkan 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=Noto+Sans+JP:400,500,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Pada keduanya yakni Google Fonts dan Font Awesome, digabungkan di dalam satu script.

Apa Itu Google Fonts?

Google Fonts adalah layanan gratis dari Google yang menyediakan berbagai macam gaya huruf (font) untuk digunakan di situs web.

Dengan ratusan pilihan font, kita bisa mengubah atau mengganti gaya huruf (fonts) di blog kita.

Baca juga: Cara Ganti Huruf (Font) di Blog 😉

Apa Itu Font Awesome?

Font Awesome adalah kerja sama antara Bootstrap dan CSS yang bertujuan untuk menampilkan angka, huruf, atau simbol berbentuk gambar (ikon) tanpa pecah atau buram pada tampilan blog.

Dulunya, Font Awesome beralamatkan: https://fontawesome.io/. Kini, beralamatkan: https://fontawesome.com/.

Font Awesome masih menyediakan versi terdahulunya yakni versi 5.15.4 dan 6.7.2 (gratis). Yang terbaru sekarang yakni versi 7.0.0 (premium/pro+).

Teman2 bisa cek langsung di sini: Font Awesome Versions.