Skip to content Skip to sidebar Skip to footer

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.

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 :
  1. Setelah kamu pilih fontnya, klik tanda plus (+) di kanan atas.
  2. Kamu perlu pilih di tab CUSTOMIZE dan pilih jenis fontnya rekomendasi saya reguler 400, reguler 400 italic, bold 700 dan bold 700 italic.
  3. Terus balik lagi tab EMBED dan kamu block url fontnya terus klik kanan pada file tersebut dan klik buka tautan di Tab baru.
  4. Pada tab tersebut kamu bisa select semua (ctrl+a) terus kamu copy kode tersebut.
  5. 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.
Setelah kamu pilih font-font yang lagi populer saat ini salah satunya Comic Neue atau Open Sans, tapi saya merekomendasikan kamu untuk menggunakan font Fira Sans. Karena lebih cocok aja dengan tampilan template LinkMagz ini.

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.
Katon
Katon Sebuah kesuksesan tak luput dari kegagalan "Yakin aja pasti bisa" :)

9 comments for "Cara merubah font pada template linkmagz dari mas sugeng"

  1. Gimana cara dapetin kode itu? Aku mau pake fonts lain soalnya

    ReplyDelete
    Replies
    1. Di fonts.gstatic.com banyak bang tinggal ambil disitu aja

      Delete
  2. Halo kak, biar bisa bikin kotak seperti bagian kode font di atas di blog kakak, caranya gimana ya?

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Sesama pengguna linkmagz salam kenal gan
    sukses selalu.ditunggu kunjungan baliknya
    www.rafidhcell.com

    ReplyDelete
    Replies
    1. sama bang aku tunggu juga kunjungannya ke blogku oke

      Delete
  5. kalau 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