Rekomendasi Font & Cara Mengganti Font Default Template LinkMagz
Ini dikarenakan mempertimbangkan kecepatan loading blog, jadi Mas Sugeng selaku pembuat template lebih menyukai font yang di masukan secara inline didalam template. Sehingga pengguna tidak bisa bebas menggantinya.
Cara Mengganti Font LinkMagz
Tidak tahu kenapa saya kurang suka template LinkMagz menggunakan font Roboto, bukan tidak bagus melainkan karena sudah pasaran yang menggunakan font tersebut di web-web besar maupun web-web kecil sekalipun.Emang font tersebut sangat bagus dan sangat ennak dibaca dimata, buat kamu yang bosa dengan font tersebut dan berencana menggantinya, kamu bisa memilih dulu font di https://fonts.google.com/ caranya sebagai berikut :
- Setelah kamu pilih fontnya, klik tanda plus (+) di kanan atas.
- Kamu perlu pilih di tab CUSTOMIZE dan pilih jenis fontnya rekomendasi saya reguler 400, reguler 400 italic, bold 700 dan bold 700 italic.
- Terus balik lagi tab EMBED dan kamu block url fontnya terus klik kanan pada file tersebut dan klik buka tautan di Tab baru.
- Pada tab tersebut kamu bisa select semua (ctrl+a) terus kamu copy kode tersebut.
- Kamu perlu minify kode tersebut di CSS Uglify (punya Mas Taufik dte.web.id) pilih mode Uglify dan copy kembali file yang sudah di Minify tersebut.
Atau kamu bisa lewatkan step ini dan menggunakan cara saya sebelumnya : Optimize Font GoolgeSelanjutnya kamu perlu membuka di dashboard blogger dan masuk ke Tema - Edit HTML dan kamu cari kode seperti berikut :
<style>
@font-face{font-family:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),local('sans-serif'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.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:Roboto;font-style:normal;font-weight:400;font-display:swap;src:local('Roboto'),local('Roboto-Regular'),local('sans-serif'),url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),local('sans-serif'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfChc4AMP6lbBP.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:Roboto;font-style:normal;font-weight:700;font-display:swap;src:local('Roboto Bold'),local('Roboto-Bold'),local('sans-serif'),url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4AMP6lQ.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}
</style>
Kamu bisa menghapus kode tersebut dan kamu ganti dengan kode yang sudah kamu siapkan tadi, intinya kamu mengganti kode yang ada diantara tag <style>........</style>
pada template LinkMagz tersebut. Secara keseluruhan akan terlihat seperti berikut :<style>
@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Fira Sans Regular'),local('FiraSans-Regular'),url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VvmojLeTY.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Fira Sans Regular'),local('FiraSans-Regular'),url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5Vvk4jLeTY.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Fira Sans Regular'),local('FiraSans-Regular'),url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5Vvm4jLeTY.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Fira Sans Regular'),local('FiraSans-Regular'),url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VvlIjLeTY.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Fira Sans Regular'),local('FiraSans-Regular'),url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VvmIjLeTY.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Fira Sans Regular'),local('FiraSans-Regular'),url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5VvmYjLeTY.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:'Fira Sans';font-style:normal;font-weight:400;font-display:swap;src:local('Fira Sans Regular'),local('FiraSans-Regular'),url(https://fonts.gstatic.com/s/firasans/v10/va9E4kDNxMZdWfMOD5Vvl4jL.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:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Fira Sans Bold'),local('FiraSans-Bold'),url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eSxf6TF0.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Fira Sans Bold'),local('FiraSans-Bold'),url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eQhf6TF0.woff2) format('woff2');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Fira Sans Bold'),local('FiraSans-Bold'),url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eShf6TF0.woff2) format('woff2');unicode-range:U+1F00-1FFF}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Fira Sans Bold'),local('FiraSans-Bold'),url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eRRf6TF0.woff2) format('woff2');unicode-range:U+0370-03FF}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Fira Sans Bold'),local('FiraSans-Bold'),url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eSRf6TF0.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Fira Sans Bold'),local('FiraSans-Bold'),url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eSBf6TF0.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:'Fira Sans';font-style:normal;font-weight:700;font-display:swap;src:local('Fira Sans Bold'),local('FiraSans-Bold'),url(https://fonts.gstatic.com/s/firasans/v10/va9B4kDNxMZdWfMOD5VnLK3eRhf6.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}
</style>
Jika kamu tidak suka mengikuti langkah yang pertama tadi kamu bisa langsung copy paste saja kode diatas ke template kamu.Selanjutnya kamu perlu mengganti kode pemanggilnya, pada Edit HTML kamu perlu ctrl+f dan cari Roboto selanjutnya jika ketemu kamu perlu mengganti Roboto tersebut dengan Fira Sans. Klik Simpan Tema dan lihat hasilnya, jika ada yang belum dimengerti bisa kita bahas di komentar. Selamat mencoba.
Bermanfaat bang Iwan, Terima Kasih
BalasHapusSama-sama mas, kira-kira mau buat tulisan apa lagi yang berhubungan dengan LinkMagz mas..? 😊
HapusMas, di Linkmagz kan Table Of Contents nya kan otomatis bagi javascript. Apakah TOC nya bisa kedetect Google? Oh ya mas, bila berkenan share cara buat TOC secara manual mas di Linkmagz tanpa harus menambah css tambahan gitu.
BalasHapusKalau ini saya belum riset, tapi nanti saya coba riset dulu beberapa artikel yah mas. Cara buat TOC secara manual gimana yah maksudnya mas..? Soalnya di template LinkMagz ini sudah lengkap semua dan mudah masukinnya di dalam artikel yang kita buat.
HapusTOC nya manual mas, gak otomatis pakai javascript. Oh ya mas, cara buat image full widht gimana ya di Linkmagz kaya blog ini?
HapusItu cuma pakai css mas, tapi buat bingung juga kalau kurang paham. Nanti saya buatkan saja artikelnya mas.
Hapus@Andri Mobile : Silahkan berikut artikel nya t.ly/T5Ru
HapusKang, bikinin tutorial widget support dark mode di linkmagz dong hehehe? soalnya mau nambah widget kayak recent post di blog jadi males karena gak bisa dark mode :(
BalasHapusOke noted mas, minggu dibuatkan yah. Tks masukkannya.
HapusRecent post by label atau recent post biasa mas..?
Iya, mas. Recent Post biasa saja
Hapuswah maaf mas, saya belum fokus ngeblog lagi karena baru pindahan rumah.
HapusTerimakasih mas iwan
BalasHapusIni samgat membantu 👍😊
Sama-sama mas..
HapusIni sekarang menggunakan font Fira Font mas ?
BalasHapusIya mas, masih pakai font Fira Sans mas.
HapusCara masang script iklan di seperti ini gimana mas ?
Hapus>> https://prnt.sc/t9z3b7
Pakai LinkMagz versi terbaru mas, terus pasang script Google Adsensenya, terus pasang kode iklan In-feednya yang didapat dari Google Adsensenya mas.
HapusTerkait : https://tinyurl.com/yatmyuco
mas untuk mendapatkan kode style itu gimana
BalasHapusKode style yang mana mas..?
HapusTolong bikin artikel lazy load gambar untuk linkmagz mas, saya daritadi nyari gak ketemu
BalasHapusDi template mas sugeng ini sudah pakai lazy load kok mas.
HapusMas, kode diantara tag 'style' itu dapet darimana koq bisa panjang, klo saya copy dari link google font, kodenya ga sepanjang itu. Saya ingin pakai font selain fira sans mas.
BalasHapusOh untuk code itu kamu bisa mendapatkannya dengan cara copy paste link font yang kamu dapat dari google fonts, nah disana nanti kamu bisa dapat file panjangnya dan ikuti step nomor 4 diatas.
HapusIya mas, saya udh copy paste dari link font di google font tapi cuman 2 baris doank adanya
HapusJangan lupa pilih juga style fontnya, 400, 700, atau bahkan 900 itu. Sesuaikan kebutuhannya, kalau untuk LinkMagz, 400 dan 700 aja udah cukup kok.
HapusMas mau tanya, tapi oot, itu yang bagian header kok bisa pas banget gitu ya mas? cara motong yang kelebihan gimana mas?
BalasHapusUntuk ini saya coba buatkan aja artikel nya nanti yah mas. Ditunggu saja yah, minggu ini saya akan update beberapa artikel.
Hapus