Cara Lain Menambahkan Font Library di Dalam Template - Arlina Design
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.

Cara Lain Menambahkan Font Library di Dalam Template

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

Cara Lain Menambahkan Font Library di Dalam Template

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

Cara Lain Menambahkan Font Library di Dalam Template

Klik menu Family Selected

Cara Lain Menambahkan Font Library di Dalam Template

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

Cara Lain Menambahkan Font Library di Dalam Template

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

Cara Lain Menambahkan Font Library di Dalam Template

Di halaman tersebut, pilih semua tulisan atau klik CTRL+A pada keyboard di source code link font, kemudian klik kanan dan pilih Copy

Cara Lain Menambahkan Font Library di Dalam Template

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.

Cara Lain Menambahkan Font Library di Dalam Template

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>

Cara Lain Menambahkan Font Library di Dalam Template

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.

Cara Lain 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.

Cara Lain Menambahkan Font Library di Dalam Template

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

Cara Lain Menambahkan Font Library di Dalam Template

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

Cara Lain Menambahkan Font Library di Dalam Template

Klik menu Family Selected

Cara Lain Menambahkan Font Library di Dalam Template

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

Cara Lain Menambahkan Font Library di Dalam Template

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

Cara Lain Menambahkan Font Library di Dalam Template

Di halaman tersebut, pilih semua tulisan atau klik CTRL+A pada keyboard di source code link font, kemudian klik kanan dan pilih Copy

Cara Lain Menambahkan Font Library di Dalam Template

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.

Cara Lain Menambahkan Font Library di Dalam Template

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>

Cara Lain Menambahkan Font Library di Dalam Template

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.

Related Post

Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo