Cara Mengganti Jenis Huruf Kompi Flexible V8.40 ke Google Fonts
Kali ini saya akan menjelaskan tutorial bagaimana caranya mengganti jenis atau gaya huruf di Kompi Flexible V8.40 Blogger Template ke Google Fonts.
Sebenarnya artikel ini merupakan postingan blog yang dikhususkan untuk salah seorang teman di Facebook, Henri Rehatta.
Mas Henri bingung bagaimana cara mengubah jenis huruf di Kompi Flexible V8.40 Blogger Template. Setelah saya cek pun, memang agak sedikit berbeda. Jenis Font yang digunakan:
Gak cuma itu saja, karena di dalam Template Blog-nya juga terdapat jenis huruf Consolas, Monaco, Monospace, inherit, dan banyak lagi.
Terdapat juga jenis huruf untuk tombol Button seperti ini:
Nah! Dari pada bingung, langsung saja kita masuk ke tutorialnya!
Login ke Blogger > Tema > Edit HTML
Simpan kode di bawah ini, di atas kode </style>
Cari kode CSS body{. CSS lengkapnya seperti ini:
Ganti CSS body{ di atas dengan kode di bawah ini:
Cari semua kode font: atau font-family: yang ada di dalam Template, ganti Font yang sudah ada dengan Google Sans, sans-serif. Contohnya:
Cukup ganti Georgia dengan Google Sans, sans-serif seperti ini:
Contoh lainnya, kode ini:
Ganti font-family:Arial,Helvetica,sans-serif dengan Google Sans, sans-serif. Selengkapnya di bawah ini:
Praktisnya adalah ubah font-family: blabla... dengan Google Sans, sans-serif. Selesai!
Permasalahan kode lainnya seperti line-height, background, font-size, margin, font-weight, padding, text-shadow, vertical align dan lainnya; boleh diabaikan (dibiarkan).
Begitulah bagaimana caranya mengganti jenis atau gaya huruf di Kompi Flexible V8.40 Blogger Template ke Google Fonts.*
Sebenarnya artikel ini merupakan postingan blog yang dikhususkan untuk salah seorang teman di Facebook, Henri Rehatta.
Mas Henri bingung bagaimana cara mengubah jenis huruf di Kompi Flexible V8.40 Blogger Template. Setelah saya cek pun, memang agak sedikit berbeda. Jenis Font yang digunakan:
body{background:#EAEAEA;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;color:#555;}
Gak cuma itu saja, karena di dalam Template Blog-nya juga terdapat jenis huruf Consolas, Monaco, Monospace, inherit, dan banyak lagi.
Terdapat juga jenis huruf untuk tombol Button seperti ini:
@font-face{font-family:"Product Sans";src:url("https://cdn.jsdelivr.net/gh/KompiAjaib/font@master/product-sans-regular.ttf") format("ttf");font-weight:normal;font-style:normal;}
a.btn-download,a.btn-play,a.btn-google,a.btn-apple,a.btn-play:hover,a.btn-download:hover,a.btn-google:hover,a.btn-apple:hover{color:#fff}Nah! Dari pada bingung, langsung saja kita masuk ke tutorialnya!
Cara Mengganti Jenis Huruf Kompi Flexible V8.40 ke Google Fonts
Login ke Blogger > Tema > Edit HTML
Simpan kode di bawah ini, di atas kode </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}Cari kode CSS body{. CSS lengkapnya seperti ini:
body{background:#EAEAEA;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Roboto","Segoe UI","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;color:#555;}Ganti CSS body{ di atas dengan kode di bawah ini:
body{background:#EAEAEA;margin:0;font-family:Google Sans, sans-serif;color:#000}Cari semua kode font: atau font-family: yang ada di dalam Template, ganti Font yang sudah ada dengan Google Sans, sans-serif. Contohnya:
.post-body blockquote{font-size:18px;font-family:Georgia;color:#000;padding:0 20px 0 13px;margin:0 -20px 0 20px;position:relative;line-height:1.3}Cukup ganti Georgia dengan Google Sans, sans-serif seperti ini:
.post-body blockquote{font-size:18px;font-family:Google Sans, sans-serif;color:#000;padding:0 20px 0 13px;margin:0 -20px 0 20px;position:relative;line-height:1.3}Contoh lainnya, kode ini:
kbd{color:#333;display:inline-block;-moz-border-radius:3px;-moz-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;-webkit-border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;background-color:#f7f7f7;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.4;margin:0 .1em;padding:.1em .6em;text-shadow:0 1px 0 #fff;vertical-align:3px}Ganti font-family:Arial,Helvetica,sans-serif dengan Google Sans, sans-serif. Selengkapnya di bawah ini:
kbd{color:#333;display:inline-block;-moz-border-radius:3px;-moz-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;-webkit-border-radius:3px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;background-color:#f7f7f7;border:1px solid #ccc;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;font-family:Google Sans, sans-serif;font-size:11px;line-height:1.4;margin:0 .1em;padding:.1em .6em;text-shadow:0 1px 0 #fff;vertical-align:3px}Praktisnya adalah ubah font-family: blabla... dengan Google Sans, sans-serif. Selesai!
Permasalahan kode lainnya seperti line-height, background, font-size, margin, font-weight, padding, text-shadow, vertical align dan lainnya; boleh diabaikan (dibiarkan).
Begitulah bagaimana caranya mengganti jenis atau gaya huruf di Kompi Flexible V8.40 Blogger Template ke Google Fonts.*
