Menggunakan Custom Fonts Pada Blogger Valid Google Amp

Menambahkan Font Style Pada AMP HTML

Jenis Font merupakan salah satu elemen penting pada sebuah blog. Memilih Font style yang cocok memang sangat dibutuhkan, semoga tampilan website menjadi lebih baik dan gampang dibaca oleh pengguna. Saat ini sudah tersedia jutaan font style yang ada di Internet, dan mungkin akan terus bertambah setiap harinya.

Memilih font style untuk tampilan halaman website memang harus dicocokan dengan selera anda, dan tentunya harus sempurna dengan tampilan dasar website anda.

Saat ini sudah berbagai third party yang menyediakan ribuan font gratis yang sanggup anda terapkan pada Blog anda. Cukup dengan meng-importnya dengan instruksi @font-face pada css blog anda, ataupun cukup memanggilnya dengan memakai tag <link>.

Lalu bagaimana cara menambahkan custom fonts pada halaman Google AMP? Berikut akan aku jelaskan cara menambahkan dan menerapkan custom fonts pada Google AMP Blogspot.

Menggunakan Kustom Fonts Pada Template Blogger AMP

Penerapan custom font pada template Blogger AMP sesungguhnya sama saja, hanya saja google AMP membatasi penerapan memakai pihak ketiga. Kita sanggup memanggil nya dengan memakai tag <link> dengan rel='stylesheet' ataupun memakai @font-face.

Berikut ini yakni pihak ketiga yang diizinkan untuk penyajian font melalui tag tautan <link>:

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

Menambahkan Custom Font dari Google Font.

Saya akan memperlihatkan teladan penerapan Google Font pada halaman AMP anda. Pergi ke fonts.google.com dan silahkan pilih salah satu jenis font yang anda inginkan. Contoh: Roboto (Sans serif) .

Klik Select this Font, maka akan keluar pop up modal dan muncul instruksi yang harus anda tambahkan sebelum instruksi </head>. Dibawah ini akan aku jelaskan cara penerapan memakai tag <link> dan CSS @font-face

Menggunakan Tag <link>

Contoh penerapan memakai tag <link> yaitu dengan menambahkannya sebelum instruksi </head> pada template anda:

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

Menggunakan CSS @font-face

Jika anda lebih menentukan memakai CSS @font-face, anda harus menempelkan CSS font-face Font tersebut diantara instruksi <style amp-custom='amp-custom> ... </style>.

Untuk mendapat CSS @font-face dari font yang anda inginkan, silahkan buka URL font tersebut kemudian view source code dengan menekan CTRL + U pada browser desktop anda.

Contoh URL untuk font Roboto yakni https://fonts.googleapis.com/css?family=Roboto kemudian tekan CTRL+U pada keyboard. Maka akan muncul source code @font-face untuk fon Roboto.

 /* cyrillic-ext */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.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: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
   unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
   unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
   unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
   unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKOzY.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: 'Roboto';
   font-style: normal;
   font-weight: 400;
   src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxK.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 instruksi diatas ini harus anda tambahkan dalam tag <amp-custom>. Contoh sederhana instruksi tersebut akan menjadi menyerupai di bawah ini.

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

Menggunakan Font dalam website anda.

Tahap simpulan yakni memanggil jenis custom font tersebut dalam website anda dengan memakai CSS property font-family. Saya contohkan di bawah ini.

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

Silahkan Save perubahan pada template anda.

Perlu diperhatikan, bila anda sudah menambahkan custom font dengan memakai tag <link>, anda tidak perlu menambahkannya lagi dengan CSS @font-face. Begitu juga sebaliknya.

Semoga bermanfaat :)

I-Artikel Indo