Cara Lengkap Menambahkan Font Library di Dalam Template Blogspot

Cara Lengkap Menambahkan Font Library di Dalam Template Blogspot - Pernah ada seseorang yang bertanya lewat inbox dengan isi pesan mengenai font yang saya gunakan. Sontak kemudian saya jawab jika blog ini menggunakan font Google Sans", lalu ia bertanya kembali dan saya jawab dengan jawaban dibawah ini. Simak langkahnya bagaimana cara menambah font library ke dalam template blogspot.

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 Alternatif 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

Klik Customize

Setelah dipilih, klik menu Customize, kemudian pilih gaya dan ketebalan font sesuai pilihan sobat.

Klik Menu Embed

Kemudian klik menu Embed, highlight atau pilih bagian link, klik kanan pada menu browser lalu pilih Go to.

Copy Source Code Font

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.

Paste Pada Tema Blogger

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}

Simpan Tema

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}

Demikian penjelasan dari jawaban mengenai Cara Lengkap Menambahkan Font Library di Dalam Template Blogspot yang bisa kami sampaikan. Apabila ada yang tidak dimengerti silahkan sampaikan via komentar. Terimakasih sudah berkunjung.