3 Cara Memasang Google Fonts (Fast Loading) di Blog

Oleh Arief Ghozaly

Jika sebelumnya saya menjelaskan cara memasang Google Fonts di blog - yang memang benar-benar asli Google Fonts, kali ini adalah tutorial bagaimana caranya memasang Google Fonts Fast Loading di Tempate Blog.

Dikatakan Fast Loading karena memang Google Fonts yang akan dipasangkan nantinya tidak memberatkan Loading blog.

Blog yang semestinya cepat muat, malah lambat termuat cuma gara-gara Google Fonts. Kan gak asik banget, ya!

3 Cara Memasang Google Fonts (Fast Loading) di Blog

Jadi di sini ada 3 cara yang bisa kalian coba. Saya sendiri merekomendasikan tutorial No. 3 di bawah.

1. Memasang Google Fonts dengan Link Format

Simpan kode di bawah ini, di bawah kode <head> atau di atas kode </head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Kalau ingin menggabungkan 2 jenis Google Fonts secara bersamaan, gunakan garis tegak (|) untuk memisahkannya. Contohnya:

<link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald|Lato' rel='stylesheet' type='text/css'>

2. Memasang Google Fonts dengan @Font-Face

Kalau ingin memasang Google Fonts dengan cara menggunakan @font-face, gunakan atribut <style> dan </style> seperti ini:

<style>
<!-- Kode @font-face Simpan di Sini -->
</style>

Contoh cara mengimplementasikannya:

Baca Juga

<style>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzOgdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}
</style>

Oh iya, kode @font-face di atas merupakan kode pecahan dari:

http://fonts.googleapis.com/css?family=Open+Sans

Kalau ingin sekedar mengetahuinya atau mau mendapatkannya, salin saja URL fonts.googleapis.com tersebut ke Address Bar. Enter dan ambil kodenya.

3. Memasang Google Fonts dengan JavaScript (Js)

Seperti yang saya katakan di atas, tutorial No. 3 inilah yang paling saya rekomendasikan. Kenapa? Pasalnya bersifat Fast Loading, - tidak terlalu memberatkan Loading blog.

Simpan kode di bawah ini, di atas kode </head>

<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=Droid+Sans");loadCSS("http://fonts.googleapis.com/css?family=Oswald:400,700");
//]]>
</script>

Kalian juga bisa mengaplikasikannya (gabung) dengan FontAwesome. Contohnya:

loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");

Sehingga nantinya menjadi 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=Droid+Sans");loadCSS("http://fonts.googleapis.com/css?family=Oswald:400,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Itu dia tutorial bagaimana caranya memasang Google Fonts Fast Loading di Tempate Blogger. Silakan bertanya, ya!

Sumber: https://www.contohblog.com/2015/11/cara-memasang-google-font-fast-loading-blog.html

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