Cara Mengganti Font (Huruf) LinkMagz ke Google Sans
Cara Mengganti atau Mengubah serta Cara Memasang Jenis Font (Huruf) ke Google Sans
Kali ini izinkan saya berbagi tutorial bagaimana caranya mengganti gaya huruf bawaan linkmagz, yakni Roboto menjadi ke Google Sans.
Kali ini izinkan saya berbagi tutorial bagaimana caranya mengganti gaya huruf bawaan linkmagz, yakni Roboto menjadi ke Google Sans.
Semulanya, gaya huruf yang ada di linkmagz blogger template menggunakan Roboto sebagai gaya huruf bawaan (default). Kali ini, kita akan memodifikasikannya agar lebih cantik.
1. Masuk ke Blogger > Template > Edit HTML
2. Cari kode ini: @font-face, lalu hapus seluruh kodenya dimulai dari <style> sampai dengan </style>
3. Setelah menghapus kode di atas, kan ada ruang kosong tuh, selanjutnya ganti dengan kode Google Sans di bawah ini:
4. Selanjutnya, cari kode ini: html{font:$(body.font), kode keseluruhannya:
5. Ganti teks yang sudah ditandai dengan ini: Google Sans, Sans Serif, sehingga menjadi:
Bagi saya, gaya huruf Google Sans ini sangat bagus. Anehnya, jarang digunakan.
Kemungkinan terbesarnya karena banyak blogger yang tidak tahu. Beruntunglah kawan-kawan menemukan postingan blog yang saya publikasikan ini.
Kalau kawan-kawan tidak ingin menggantinya ke Google Sans, tapi ingin menggantinya dengan Google Fonts milik Google, bisa ikut cara berikut: Cara Mengubah Jenis Huruf (Google Fonts) di Template Blogger.
Demikian tutorial bagaimana caranya membuat, memasang atau menggantikan gaya huruf (Google Fonts: Roboto) di LinkMagz blogger template ke Google Sans.
Cara Mengganti Huruf ke Google Sans di LinkMagz Blogger Template
1. Masuk ke Blogger > Template > Edit HTML
2. Cari kode ini: @font-face, lalu hapus seluruh kodenya dimulai dari <style> sampai dengan </style>
<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>3. Setelah menghapus kode di atas, kan ada ruang kosong tuh, selanjutnya ganti dengan kode Google Sans di bawah ini:
<style>
@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}
</style>4. Selanjutnya, cari kode ini: html{font:$(body.font), kode keseluruhannya:
html{font:$(body.font)}body{background:$(body.background);color:$(body.text.color);font-family:Roboto,Arial,sans-serif}a:link{text-decoration:none;color:$(body.link.color)}5. Ganti teks yang sudah ditandai dengan ini: Google Sans, Sans Serif, sehingga menjadi:
html{font:$(body.font)}body{background:$(body.background);color:$(body.text.color);font-family:Google Sans, Sans Serif}a:link{text-decoration:none;color:$(body.link.color)}Bagi saya, gaya huruf Google Sans ini sangat bagus. Anehnya, jarang digunakan.
Kemungkinan terbesarnya karena banyak blogger yang tidak tahu. Beruntunglah kawan-kawan menemukan postingan blog yang saya publikasikan ini.
Kalau kawan-kawan tidak ingin menggantinya ke Google Sans, tapi ingin menggantinya dengan Google Fonts milik Google, bisa ikut cara berikut: Cara Mengubah Jenis Huruf (Google Fonts) di Template Blogger.
Demikian tutorial bagaimana caranya membuat, memasang atau menggantikan gaya huruf (Google Fonts: Roboto) di LinkMagz blogger template ke Google Sans.
Thanks for reading Cara Mengganti Font (Huruf) LinkMagz ke Google Sans! 😃
 LinkMagz ke Google Sans){kind=link}
Min, cara ganti font tulisan artikel, seperti artikel di blog ini gimana? Font nya bagus bgt postingan blog ini. Nama font nya apa?
ReplyDeleteNamanya: Raleway... di Google Fonts ada.
Delete<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=Raleway:400,500,700");
//]]>
</script>
Caranya bisa dilihat di sini:
Deletehttps://www.ozal.web.id/2023/06/cara-mengubah-jenis-huruf-google-fonts-blogger.html
Req cara merubah warna templatennya
ReplyDeleteSudah tersedia di versi 1.8.0 om. Warna hijau, hitam, dan merah.
DeleteMas, kalau fontnya merriweather sans, bagaimana yaah caranya. Saya dapat kode dari google fontnya pendek, apa bisa dipakai?
ReplyDeletelink rel="preconnect" href="https://fonts.gstatic.com"
link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"
Bisa saja mas, tapi saya merekomendasikan cara di atas
DeleteTutorialnya bisa diikuti di sini: https://www.ozal.web.id/2023/06/cara-mengubah-jenis-huruf-google-fonts-blogger.html
Deletekalau pakai custom css gimana min, untuk merubah warna dan ukuran fontnya ?
ReplyDeleteKalau ingin mengubah ukuran font, cari kode ini:
Deletenormal normal 16px Helvetica, Arial, sans-serif
Ganti angka 16px di atas dengan nilai yang lebih besar, contohnya: 18px. Semakin besar angkanya semakin besar ukuran hurufnya.
Kalau warna, cari kode ini: #636363 di bagian kode Teks Halaman (pasti ada) di dalam template blogger. Kode warnanya #636363 itu bisa diganti, warna lainnya bisa cek di sini: https://linkmagzblog.blogspot.com/p/color-picker.html