Pasang Custom Fonts Pada Blogger Valid Google Blog Amp Html

Pasang Custom Fonts Pada Blogger Valid Google Blog Amp Html

- Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML, Pada dasarnya jenis font ialah salah satu elemen penting pada sebuah blog. Memasang font style untuk tampilan halaman website memang harus dicocokan dengan selera Anda, dan tentunya harus sesuai dengan tampilan website Anda.

Nah bagaimana cara menambahkan custom fonts pada halaman blog yang valid Google AMP? Berikut ini akan aku jelaskan cara menambahkan dan menerapkan custom fonts pada blog Google AMP HTML.

Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML

Berikut ini merupakan 5 situs penyedia font yang banyak dipakai dalam template blogger :

1. Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com
2. Google Fonts: https://fonts.googleapis.com
3. Fonts.com: https://fast.fonts.net
4. Typekit: https://use.typekit.net
5. Typography.com: https://cloud.typography.com

Memasang Custom Font dari Google Font

a. Anda masuk ke fonts.google.com , silahkan pilih salah satu jenis font yang diinginkan.
Contohnya: Open Sans.
b. Anda klik Select this Font, akan keluar pop up modal dan muncul aba-aba yang harus anda tambahkan sebelum aba-aba </head>.

Dalam penerapanya memakai tag <link> dan CSS @font-face

1. Menggunakan tag <link> (Not Recomended)

Cara pertama ialah dengan memakai tag link, namun tidak aku sarankan sebab akan memepengaruhi loading situs blog, bila template blog Anda banyak javascriptnya.

Untuk memakai tag <link> , caranya dengan menambahkan link dibawah ini sebelum aba-aba </head> pada template blog:

 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'/>

2. Menggunakan CSS @font-face (Recomended)

Cara ini sangat aku rekomendasi, sebab hanya memakai tag CSS sehingga sanggup mengurangi beban loading template blog.

Ambil aba-aba CSS fontnya dengan membuka URL font tersebut di tab baru, kemudian copy semua aba-aba CSS yang ada, kemudian tambahkan di antara aba-aba <style amp-custom='amp-custom> ... </style> di template blog.
Contohnya :

• Link URL font : https://fonts.googleapis.com/css?family=Open+Sans

• Copy URL diatas pada tab gres browser, akan muncul aba-aba CSSnya menyerupai dibawah ini.

/* cyrillic-ext */ @font-face {   font-family: 'Open Sans';   font-style: normal;   font-weight: 400;   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');   unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face {   font-family: 'Open Sans';   font-style: normal;   font-weight: 400;   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face {   font-family: 'Open Sans';   font-style: normal;   font-weight: 400;   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');   unicode-range: U+1F00-1FFF; } /* greek */ @font-face {   font-family: 'Open Sans';   font-style: normal;   font-weight: 400;   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');   unicode-range: U+0370-03FF; } /* vietnamese */ @font-face {   font-family: 'Open Sans';   font-style: normal;   font-weight: 400;   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face {   font-family: 'Open Sans';   font-style: normal;   font-weight: 400;   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFW50bbck.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; } /* latin */ @font-face {   font-family: 'Open Sans';   font-style: normal;   font-weight: 400;   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.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; } 

• Selanjutnya aba-aba diatas ini harus anda tambahkan dalam tag <amp-custom>. Contoh sederhana aba-aba tersebut akan menjadi menyerupai di bawah ini.

   <style amp-custom>   @font-face {     font-family: "Open+Sans";     src: url("https://fonts.googleapis.com/Open+Sans.ttf");   } </style>

Untuk memasang font diatas pada template blog, Anda gunakan CSS property font-family. Ccontohnya menyerupai bawah ini.

   body {     font-family: "Open+Sans", sans-serif;font-size:16px;font-weight:400;   }

Sampai disini pembahasan kali ini, biar posting ihwal Pasang Custom Fonts Pada Blogger Valid Google Blog AMP HTML sanggup bermamfaat untuk Anda teman. Jangan lupa berikan komentarnya.