Cara Setting CSS Font yang Benar di Blogger
Kali ini saya akan menjelaskan bagaimana caranya setting atau mengatur CSS Font yang benar dan tepat di Blogger / Blogspot.
Ada banyak di antara kita dan kalian yang menggunakan Blogger Template berbayar (Premium). Biasanya, yang dilakukan pertamakali adalah melakukan konfigurasi pada CSS Font di tema blog.
Pertanyaannya adalah apakah kalian paham dan bisa bagaimana cara menyetel CSS Font yang benar di blog?
Melalui artikel ini, saya akan menjelaskan secara rinci dan detail tentang cara mengatur CSS Font yang ada di Template Blogger.
Tampilan pada CSS Font itu punya gaya yang berbeda-beda. Contohnya:
Ada juga yang seperti ini:
Atau seperti ini:
Lalu ada yang seperti ini juga:
Untuk tahap pertama, saya akan membahas tentang cara penggunaan dan penempatan kode @font-face, .body, .post-body, atau .post dengan tepat.
Kita awali dengan @font-face.
Pada awalnya, penggunaan @font-face sebagai bentuk cara mengatasi Render Blocking CSS dan JavaScript (Js), - tujuannya untuk mempercepat kecepatan pemuatan (Loading) tampilan blog.
Sayangnya, @font-face tidak mendukung semua Browser. Artinya, tidak semua Browser bisa menampilkan jenis huruf (Font) yang ditampilkan oleh si @font-face ini.
Makanya, penggunaan @font-face tidak disarankan. Contohnya?
Lalu ada lagi penggunaan kode .body, .post-body, atau .post. Sebenarnya ada perbedaan yang sangat signifikan dari ketiga jenis kode ini.
.body misalnya, kalau kita menggunakan kode .body untuk penggunaan CSS Font, misalnya seperti ini:
Mengapa demikian? Karena kita menggunakan .body, - yang artinya badan. Istilahnya kalau di Navigasi Menu, .body ini sama seperti tag Home, induk segala induk. Dialah yang mewakili semua Element blog.
Ada lagi penggunaan kode .post-body dan .post.
.post-body artinya adalah CSS tersebut akan berlaku hanya untuk bagian Posting. Di luar tag .post-body, CSS-nya tidak berlaku.
Lalu ada lagi .post, yang berarti CSS-nya hanya berlaku untuk bagian Posting - baik di bagian dalam artikel Entri (artikel biasa) dan Statis (About, Contact, Disclaimer, dan Sitemap).
Sudah paham, kan?
Perhatikan pada kode di atas; terdapat kode CSS font-family, font-weight, font-style, font-size, dan line-height... yang dibungkus oleh @font-face, .body, .post-body, atau .post yang sudah dijelaskan tadi.
font-family adalah suatu tempat untuk menentukan Font apa yang ingin digunakan. Contohnya seperti 'Roboto', sans-serif atau 'Lato', sans-serif.
font-weight adalah berat (ketebalan) untuk Font yang digunakan. Kalian bisa mengisinya dengan angka 300 yang artinya ringan (Light), atau 400 yang berarti Standart, 500 dengan ketebalan biasa, atau di angka 700 yang berarti sangat tebal.
Lalu ada kode CSS font-style untuk menentukan gaya teks. Boleh diisi dengan normal atau italic. Biasanya, font-style tidak digunakan. Jika tidak digunakan, secara otomatis font-style yang digunakan adalah normal.
Selanjutnya ada font-size yang artinya CSS untuk mengukur ukuran Font. Bisa diisi dengan 12px, 14px, atau 16px. Tergantung bagaimana lebar tampilan blog dan kepadatan paragrafnya.
Terakhir ada line-height. Apa itu? line-height adalah CSS yang mengatur spasi atau jarak antara baris teks dengan baris teks di bawahnya. Biasanya diisi di angka 1.2em atau 1.4em.
Contoh penggunaan CSS Font yang benar seperti ini:
Atau bisa juga disingkat seperti ini:
Atau seperti ini pun juga boleh:
Setelah membaca penjelasan di atas, CSS Font itu cukup mudah untuk dipahami, kan?
Itulah bagaimana caranya setting atau mengatur CSS Font yang benar dan tepat di Blogger / Blogspot.
Ada banyak di antara kita dan kalian yang menggunakan Blogger Template berbayar (Premium). Biasanya, yang dilakukan pertamakali adalah melakukan konfigurasi pada CSS Font di tema blog.
Pertanyaannya adalah apakah kalian paham dan bisa bagaimana cara menyetel CSS Font yang benar di blog?
Melalui artikel ini, saya akan menjelaskan secara rinci dan detail tentang cara mengatur CSS Font yang ada di Template Blogger.
Cara Setting CSS Font yang Benar di Blogger
Tampilan pada CSS Font itu punya gaya yang berbeda-beda. Contohnya:
@font-face {
font-family: /* CSS untuk Nama Font */;
font-weight: /* CSS untuk Berat Font */;
font-style: /* CSS untuk Gaya Font */;
font-size: /* CSS untuk Ukuran Font */;
line-height: /* CSS untuk Jarak atau Spasi Teks per Baris */;
}Ada juga yang seperti ini:
.body {
font-family: /* CSS untuk Nama Font */;
font-weight: /* CSS untuk Berat Font */;
font-style: /* CSS untuk Gaya Font */;
font-size: /* CSS untuk Ukuran Font */;
line-height: /* CSS untuk Jarak atau Spasi Teks per Baris */;
}Atau seperti ini:
.post-body {
font-family: /* CSS untuk Nama Font */;
font-weight: /* CSS untuk Berat Font */;
font-style: /* CSS untuk Gaya Font */;
font-size: /* CSS untuk Ukuran Font */;
line-height: /* CSS untuk Jarak atau Spasi Teks per Baris */;
}Lalu ada yang seperti ini juga:
.post {
font-family: /* CSS untuk Nama Font */;
font-weight: /* CSS untuk Berat Font */;
font-style: /* CSS untuk Gaya Font */;
font-size: /* CSS untuk Ukuran Font */;
line-height: /* CSS untuk Jarak atau Spasi Teks per Baris */;
}Untuk tahap pertama, saya akan membahas tentang cara penggunaan dan penempatan kode @font-face, .body, .post-body, atau .post dengan tepat.
Kita awali dengan @font-face.
Pada awalnya, penggunaan @font-face sebagai bentuk cara mengatasi Render Blocking CSS dan JavaScript (Js), - tujuannya untuk mempercepat kecepatan pemuatan (Loading) tampilan blog.
Sayangnya, @font-face tidak mendukung semua Browser. Artinya, tidak semua Browser bisa menampilkan jenis huruf (Font) yang ditampilkan oleh si @font-face ini.
Makanya, penggunaan @font-face tidak disarankan. Contohnya?
@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}Lalu ada lagi penggunaan kode .body, .post-body, atau .post. Sebenarnya ada perbedaan yang sangat signifikan dari ketiga jenis kode ini.
.body misalnya, kalau kita menggunakan kode .body untuk penggunaan CSS Font, misalnya seperti ini:
.body {font-family: Arial, sans-serif; font-size: 12px; font-weight: normal:}
...itu artinya adalah semua Element blog seperti Popular Posts, CSS Font pada isi dalam artikel, Snippet (teks dengan deskripsi singkat), dan lainnya akan diwakili oleh Arial, sans-serif.
Mengapa demikian? Karena kita menggunakan .body, - yang artinya badan. Istilahnya kalau di Navigasi Menu, .body ini sama seperti tag Home, induk segala induk. Dialah yang mewakili semua Element blog.
Ada lagi penggunaan kode .post-body dan .post.
.post-body artinya adalah CSS tersebut akan berlaku hanya untuk bagian Posting. Di luar tag .post-body, CSS-nya tidak berlaku.
Lalu ada lagi .post, yang berarti CSS-nya hanya berlaku untuk bagian Posting - baik di bagian dalam artikel Entri (artikel biasa) dan Statis (About, Contact, Disclaimer, dan Sitemap).
Sudah paham, kan?
Memahami CSS Font pada Blogger Templates
Perhatikan pada kode di atas; terdapat kode CSS font-family, font-weight, font-style, font-size, dan line-height... yang dibungkus oleh @font-face, .body, .post-body, atau .post yang sudah dijelaskan tadi.
font-family adalah suatu tempat untuk menentukan Font apa yang ingin digunakan. Contohnya seperti 'Roboto', sans-serif atau 'Lato', sans-serif.
font-weight adalah berat (ketebalan) untuk Font yang digunakan. Kalian bisa mengisinya dengan angka 300 yang artinya ringan (Light), atau 400 yang berarti Standart, 500 dengan ketebalan biasa, atau di angka 700 yang berarti sangat tebal.
Lalu ada kode CSS font-style untuk menentukan gaya teks. Boleh diisi dengan normal atau italic. Biasanya, font-style tidak digunakan. Jika tidak digunakan, secara otomatis font-style yang digunakan adalah normal.
Selanjutnya ada font-size yang artinya CSS untuk mengukur ukuran Font. Bisa diisi dengan 12px, 14px, atau 16px. Tergantung bagaimana lebar tampilan blog dan kepadatan paragrafnya.
Terakhir ada line-height. Apa itu? line-height adalah CSS yang mengatur spasi atau jarak antara baris teks dengan baris teks di bawahnya. Biasanya diisi di angka 1.2em atau 1.4em.
Contoh penggunaan CSS Font yang benar seperti ini:
.post {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 1.2em;
}Atau bisa juga disingkat seperti ini:
.post {font-family: 'Roboto', sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 1.2em;}Atau seperti ini pun juga boleh:
.post {font: 400 14px 'Roboto', sans-serif; line-height: 1.2em;}Setelah membaca penjelasan di atas, CSS Font itu cukup mudah untuk dipahami, kan?
Itulah bagaimana caranya setting atau mengatur CSS Font yang benar dan tepat di Blogger / Blogspot.
