Cara Memasang Google Font Fast Loading di Template Blog
November 6, 2015
SETIDAKNYA ada tiga 3 cara memasang huruf Google (Google Font) di template blog. Jika tidak pasang huruf apa pun, secara default Google akan menampilkan huruf standar Arial atau Sans-serif.
Kita bisa memilih dulu hurufnya di Google Font, lalu kodenya kita pasang di template.
Disarankan memasang huruf yang "umum" saja, gak usah neko-neko, yang penting membuat tulisan jadi enak dibaca.
Baca Juga:
Situs-situs berita umumnya menggunakan huruf Arial, Helvetica, atau jenis huruf Sans-Serif lainnya, seperti Open Sans atau Droid Sans --yang dipasang CB Blogger. Banyak juga blogger yang menggunakan huruf Verdana, Tahoma, Trebuchet, atau PT Sans.
Memasang Google Font biasanya menimbulkan masalah Blocking Render CSS. Untuk menghindarinya, jangan gunakan cara no.1, tapi gunakan nomor 2 dan lebih baik lagi no. 3 di bawah ini.
3 Cara Memasang Google Font di Template Blog
1. Menggunakan Link Format
Simpan di bawah kode <head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
Kombinasikan (Lebih dari Satu Jenis Huruf):
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'>
2. Menggunakan Font-Face
Simpan di atas kode </head>
Untuk mendapatkan kode font-facenya, copas url link huruf ke address bar dan dapatkan kodenya. Misalnya: http://fonts.googleapis.com/css?family=Open+Sans
Kodenya:
<style>
<!-- kode @font-face di sini -->
</style>
<!-- kode @font-face di sini -->
</style>
Contoh:
<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>
@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>
3. Menggunakan Javascript (Recommended)
Simpan 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=Open+Sans+Condensed:700");loadCSS("http://fonts.googleapis.com/css?family=Oswald:400,700");
//]]>
</script>
//<![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=Open+Sans+Condensed:700");loadCSS("http://fonts.googleapis.com/css?family=Oswald:400,700");
//]]>
</script>
Font Awesome juga bisa dipasang seperti itu agar Fast Loading.
Simpan di atas kode </head>
Contoh:
<script>
//<![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("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
//<![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("//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>
Sumber:
- http://www.gotknowhow.com/articles/how-to-asynchronously-load-font-awesome-css-file
- http://gond3s.com/2014/05/asynchronous-font-awesome.html
- http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-face_rule
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
Mas...pada kombinasi jenis google font di atas kan ada tuh "Open+Sans|Oswald". Nah, seandainya kata "Oswald" tersebut di hapus, bagaimana efeknya? Gak kenapa2?
ReplyDeletegak apa-apa, lihat saja hasilnya
DeleteGak ada efek apa-apa mas hehe
Deletemanggil font open sans condensed sering gak bisa itu biasanya karena apa mas CB? sudah coba pasang ketiga cara diatas masih gak bisa juga. Malah font times new roman yang muncul. Terima kasih
ReplyDelete