Ada beberapa cara menambahkan font di dalam template blogger yaitu dengan menambahkan link yang menuju hostingan font atau dengan cara menambahkan pemanggil CSS font dengan Javascript. Namun ada cara lain untuk menambahkan font di dalam template blogger yaitu dengan cara menambahkan langsung link dari library font di dalam CSS. Tentunya alasan sobat untuk mengganti font di blogger adalah ingin tampil lebih menarik dengan blog lainnya dan tidak ada salahnya juga untuk mengganti font selama visibilitas font masih nyaman ketika pengunjung membaca isi tulisan di blog.
Tips Gampang Menambahkan Font Library Pada Blog Kita
Di sini saya akan memberi referensi library font yang digunakan yaitu dari Google Font karena terdapat banyak sekali pilihan font menarik yang bisa sobat gunakan untuk blog. Pertama, silakan kunjungi situs https://fonts.google.com
Sebagai contoh di sini saya akan menggunakan font yang paling banyak digunakan saat ini yaitu Roboto buatan Christian Robertson. Tentunya sobat bebas memilih font apa yang ingin digunakan nantinya. Kemudian pilih menu Select this font
Klik menu Family Selected
Setelah dipilih, klik menu Customize, kemudian pilih gaya dan ketebalan font sesuai pilihan sobat.
Kemudian klik menu Embed, highlight atau pilih bagian link, klik kanan pada menu browser lalu pilih Go to.
Di halaman tersebut, pilih semua tulisan atau klik CTRL+A pada keyboard di source code link font, kemudian klik kanan dan pilih Copy
Kemudian Paste di kolom CSS Minifier /p/css-minifier.html dan pilih opsi Strip all comments, Super compact, dan Remove the last semicolon. Kemudian klik tombol Compress CSS.
Setelah itu Copy kembali semua kode yang sudah terkompres tadi, kemudian buka halaman Blogger, pilih Tema dan klik tombol Edit HTML, Paste semua kode font tadi tepat sebelum kode ]]></b:skin>
Agar font dapat termuat dengan sempurna di blog sobat. Tambahkan juga font-family dari font yang sobat gunakan pada kode CSS body, contohnya seperti ini
body{font-family:'Roboto',sans-serif;font-size:16px;font-weight:400;text-align:left;color:#000}Untuk sentuhan akhir, klik Simpan tema dan lihat hasilnya di blog sobat.
Bagi sobat yang sebelumnya menggunakan font dengan cara menambahkan meta link langsung atau dengan Javascript, hapus kode tersebut karena sobat sudah menggantinya dengan cara yang baru.
Oh iya, untuk font yang digunakan blog ini yaitu Google Sans. Sobat bisa tambahkan kode CSS font di bawah ini ke template sobat
/* Fonts */
@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}Oke, sekian dari saya. Maaf jika ada kekurangan. Terima kasih dan wassalam.