Cara merubah font pada template linkmagz dari mas sugeng
Bagi pengguna template LinkMagz mungkin ingin mengganti font default bawaan template tersebut. Template tersebut menggunakan font default yaitu font Roboto, sayangnya kamu tidak bisa mengganti default font tersebut sesuka hati kamu di menu Desainer Template blogger.
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.
Karena saya kurang suka template LinkMagz menggunakan font Roboto, bukannya font itu tidak bagus melainkan karena sudah pasaran yang menggunakan font tersebut di berbagai website dan blog yang ada saat ini.
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
Karena saya kurang suka template LinkMagz menggunakan font Roboto, bukannya font itu tidak bagus melainkan karena sudah pasaran yang menggunakan font tersebut di berbagai website dan blog yang ada saat ini.
Memang font tersebut sangat bagus dan sangat enak dipandang dimata, buat kamu yang bosan dengan font tersebut dan berencana menggantinya, kamu bisa memilih dulu font di https://fonts.google.com/ caranya sebagai berikut :
Atau kamu bisa lewatkan step ini dan menggunakan cara saya sebelumnya : Optimize Font Goolge
Selanjutnya kamu perlu membuka di dashboard blogger dan masuk ke Tema - Edit HTML dan kamu cari kode seperti 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 Goolge
Selanjutnya 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 tanyakan dikolom komentar. Selamat mencoba.
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 tanyakan dikolom komentar. Selamat mencoba.
gabisa dicopy kodenya
ReplyDeleteBisa dicoba kembali kak
DeleteGimana cara dapetin kode itu? Aku mau pake fonts lain soalnya
ReplyDeleteDi fonts.gstatic.com banyak bang tinggal ambil disitu aja
DeleteHalo kak, biar bisa bikin kotak seperti bagian kode font di atas di blog kakak, caranya gimana ya?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteSesama pengguna linkmagz salam kenal gan
ReplyDeletesukses selalu.ditunggu kunjungan baliknya
www.rafidhcell.com
sama bang aku tunggu juga kunjungannya ke blogku oke
Deletekalau menggantinya lewat custom css bagaimana, di mas sugeng hanya mencontohkan ganti fontnya saja, untuk mengganti warna dan ukuran font bagaimana ya kalau lewat custom css
ReplyDelete