Tutorial Lengkap Cara Menambahkan Font Library di Dalam Template

Kemarin ada yang bertanya lewat inbox dengan isi pesan "Kak, blog Arlina Design ini menggunakan font apa?" kemudian saya jawab "Blog ini menggunakan font Google Sans", lalu ia kembali bertanya "Bagaimana cara memasangnya di blog saya?". Ya, dan inilah jawabannya.

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.

Cara Lain Menambahkan Font Library di Dalam Template

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 https://www.arlinadzgn.com/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.