Cara Memasang Font Google Sans di Blogger

Cara Memasang Font Google Sans

Cara Memasang Font Google Sans di Blogger - Assalamualikum Warahmatullahi Wabarakatuh, semoga sobat semua dalam keadaan sehat selalu. Postingan kali ini kami akan bagikan tutorial cara memasang dan menggunakan font Google Sans untuk blog sobat.

Apa itu font Google Sans?

Font Google Sans adalah salah satu font yang paling mirip seperti yang digunakan oleh web Google. Tentu bagi blog yang telah memiliki google adsense akan sangat cocok menggunakan font ini, karena lebih user friendly ketika di sandingkan dengan font pada iklan adsense. Tapi itu tergantung selera juga sih sebenarnya.. hehe.

Font Google Sans juga merupakan font yang digunakan pada blog ini. Udah gak penasaran lagi kan?

OK, langsung saja kita bahas tutorial memasang font Google Sans di blogger. Sebenarnya cara memasang font Google Sans ini sama saja dengan memasang google font yang lainnya, hanya saja font Google Sans ini tidak tersedia di situs Google Font, jadi kita harus menggunakan metode font-face untuk menginstall fontnya.

Cara Memasang Font Google Sans di Blogger:

1. Masuk ke akun blogger sobat dan masuk menu Dashboard.
2. Lalu pilih Tema > Edit HTML
3. Selanjutnya copy kode CSS berikut ini dan pastekan di atas kode </head>
   

   
   <style>
      /* Fonts Google Sans */
   @font-face {font-family: 'Google Sans';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/googlesans/v46/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjEUvaYr.woff2) format('woff2');unicode-range: U+0370-03FF;}
   @font-face {font-family: 'Google Sans';font-style: normal;font-weight: 400;font-display: swap;src: url(https://fonts.gstatic.com/s/googlesans/v46/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjwUvaYr.woff2) format('woff2');unicode-range: U+0100-02AF, 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;font-display: swap;src: url(https://fonts.gstatic.com/s/googlesans/v46/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjIUvQ.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;font-display: swap;src: url(https://fonts.gstatic.com/s/googlesans/v46/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjEUvaYr.woff2) format('woff2');unicode-range: U+0370-03FF;}
   @font-face {font-family: 'Google Sans';font-style: normal;font-weight: 500;font-display: swap;src: url(https://fonts.gstatic.com/s/googlesans/v46/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjwUvaYr.woff2) format('woff2');unicode-range: U+0100-02AF, 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;font-display: swap;src: url(https://fonts.gstatic.com/s/googlesans/v46/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjIUvQ.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: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/googlesans/v46/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjEUvaYr.woff2) format('woff2');unicode-range: U+0370-03FF;}
   @font-face {font-family: 'Google Sans';font-style: normal;font-weight: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/googlesans/v46/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjwUvaYr.woff2) format('woff2');unicode-range: U+0100-02AF, 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: 700;font-display: swap;src: url(https://fonts.gstatic.com/s/googlesans/v46/4UasrENHsxJlGDuGo1OIlJfC6l_24rlCK1Yo_Iqcsih3SAyH6cAwhX9RPjIUvQ.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;}
   </style>
       

4. Selanjutnya untuk mengganti font blog sobat silahkan cari kode "font-family" lalu ganti nama font sebelumnya dengan font baru sehingga jadi seperti ini: font-family: 'Google Sans', sans-serif;
5. Setelah itu silahkan Simpan. Kemudian buka blog anda dan lihatlah hasilnya!

Nah, itulah cara memasang dan menggunakan font Google Sans di Blogger, mudah bukan?