Cara Memasang Google Fonts di Blogger dengan Mudah
Kali ini saya akan menjelaskan tutorial bagaimana caranya memasang Google Fonts di Template Blogger dalam 4 langkah mudah.
Masalahnya adalah Google Fonts yang saya bagikan kali ini tidak mendukung kebanyakan Browser secara default.
Tapi ya gak masalah. Lagi pula peramban Brwoser seperti Google Chrome, Mozilla Firefox, dan Safari (iOS) masih bisa menampilkan Google Fonts sebagaimana mestinya.
Login ke Blogger > Tema > Edit HTML
Simpan kode di bawah ini, di atas kode </style> atau ]]></b:skin>
Simpan perubahan pada Template Blogger.
Oh iya, saya menempatkan kode di atas TEPAT di atas kode ]]></b:skin>. Ketika disimpan di atas kode </style>, Google Fonts tidak muncul di tampilan blog.
Selesai menyimpan kode Google Fonts di dalam Template Blogger, sekarang kita panggil Google Fonts tersebut agar mau tampil di halaman blog yang kalian punya.
Cari kode .post atau .post-body atau .body. Kira-kira kode lengkapnya seperti ini:
Pada teks font-family, ganti Arial, sans-serif dengan Google Sans, Sans Serif. Contohnya seperti ini:
Semuanya! Selesai.
Perlu diberi tahu, kira-kira ada JavaScript (Js) seperti di bawah ini, - di dalam Template Blogger yang kalian gunakan?
Kalau gak ketemu, cari dengan kata kunci loadcss. Pasti ketemu!
Perhatikan ya...!! Sebagai contoh saja... Di atas ada 2 jenis JavaScript (Js). Yang pertama ada Lato untuk teks artikel. Yang kedua ada FontAwesome untuk menampilkan logo-logo dengan bantuan CSS.
Karena Lato tidak digunakan lagi, dimana sebagai gantinya kita menggunakan Google Fonts, maka hapus JavaScript (Js) dari Lato tersebut. Untuk apa? Agar blog lebih ringan!
Yang ini yang harus dihapus:
Setelah dihapus, nanti hasilnya seperti ini:
Ingat juga, di atas itu merupakan JavaScript (Js) dari Font Family Lato. Hapus semua Font Family dengan nama Lato yang ada di dalam Template Blogger. Ganti dengan Google Sans, sans-serif.
Bisa, kan? Mudah dipahami, kan? Di atas sudah saya jelaskan secara detail. Jika bingung, tanyakan di bawah.*
Masalahnya adalah Google Fonts yang saya bagikan kali ini tidak mendukung kebanyakan Browser secara default.
Tapi ya gak masalah. Lagi pula peramban Brwoser seperti Google Chrome, Mozilla Firefox, dan Safari (iOS) masih bisa menampilkan Google Fonts sebagaimana mestinya.
Cara Memasang Google Fonts di Blogger dengan Mudah
Login ke Blogger > Tema > Edit HTML
Simpan kode di bawah ini, di atas kode </style> atau ]]></b:skin>
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Nwp5MKg.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Awp5MKg.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:local('Google Sans Regular'),local(GoogleSans-Regular),url(//fonts.gstatic.com/s/googlesans/v5/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt3CwZ-Pw.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtwCwZ-Pw.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94Yt9CwZ-Pw.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:local('Google Sans Medium'),local(GoogleSans-Medium),url(//fonts.gstatic.com/s/googlesans/v5/4UabrENHsxJlGDuGo1OIlLU94YtzCwY.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}Simpan perubahan pada Template Blogger.
Oh iya, saya menempatkan kode di atas TEPAT di atas kode ]]></b:skin>. Ketika disimpan di atas kode </style>, Google Fonts tidak muncul di tampilan blog.
Selesai menyimpan kode Google Fonts di dalam Template Blogger, sekarang kita panggil Google Fonts tersebut agar mau tampil di halaman blog yang kalian punya.
Cari kode .post atau .post-body atau .body. Kira-kira kode lengkapnya seperti ini:
.body {background: fff; font-family: Arial, sans-serif; font-size: 14px; line-height: 1.4em}Pada teks font-family, ganti Arial, sans-serif dengan Google Sans, Sans Serif. Contohnya seperti ini:
.body {background: fff; font-family: Google Sans, Sans Serif; font-size: 14px; line-height: 1.4em}
Semua jenis font yang bernama Arial - yang ada di dalam Template Blogger, ganti dengan font bertuliskan Google Fonts seperti di atas.
Semuanya! Selesai.
Duplicate JavaScript (Js) !!!
Perlu diberi tahu, kira-kira ada JavaScript (Js) seperti di bawah ini, - di dalam Template Blogger yang kalian gunakan?
<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=Lato:500,700");loadCSS("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>Kalau gak ketemu, cari dengan kata kunci loadcss. Pasti ketemu!
Perhatikan ya...!! Sebagai contoh saja... Di atas ada 2 jenis JavaScript (Js). Yang pertama ada Lato untuk teks artikel. Yang kedua ada FontAwesome untuk menampilkan logo-logo dengan bantuan CSS.
Karena Lato tidak digunakan lagi, dimana sebagai gantinya kita menggunakan Google Fonts, maka hapus JavaScript (Js) dari Lato tersebut. Untuk apa? Agar blog lebih ringan!
Yang ini yang harus dihapus:
loadCSS("https://fonts.googleapis.com/css?family=Lato:500,700");Setelah dihapus, nanti hasilnya 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("//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>Ingat juga, di atas itu merupakan JavaScript (Js) dari Font Family Lato. Hapus semua Font Family dengan nama Lato yang ada di dalam Template Blogger. Ganti dengan Google Sans, sans-serif.
Bisa, kan? Mudah dipahami, kan? Di atas sudah saya jelaskan secara detail. Jika bingung, tanyakan di bawah.*
