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, agar tampilan website menjadi lebih baik dan mudah 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 tepat dengan tampilan dasar website anda.
Saat ini sudah banyak sekali third party yang menyediakan ribuan font gratis yang bisa anda terapkan pada Blog anda. Cukup dengan meng-importnya dengan kode
@font-face pada css blog anda, ataupun cukup memanggilnya dengan menggunakan tag <link>. Lalu bagaimana cara menambahkan custom fonts pada halaman Google AMP? Berikut akan saya 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 sebenarnya sama saja, hanya saja google AMP membatasi penerapan menggunakan pihak ketiga. Kita dapat memanggil nya dengan menggunakan tag
<link> dengan rel='stylesheet' ataupun menggunakan @font-face. Berikut ini adalah 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 memberikan contoh 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 kode yang harus anda tambahkan sebelum kode </head>. Dibawah ini akan saya jelaskan cara penerapan menggunakan tag
<link> dan CSS @font-faceMenggunakan Tag <link>
Contoh penerapan menggunakan tag
<link> yaitu dengan menambahkannya sebelum kode </head> pada template anda: <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'/>Menggunakan CSS @font-face
Jika anda lebih memilih menggunakan CSS
@font-face, anda harus menempelkan CSS font-face Font tersebut diantara kode <style amp-custom='amp-custom> ... </style>. Untuk mendapatkan CSS
@font-face dari font yang anda inginkan, silahkan buka URL font tersebut lalu view source code dengan menekan CTRL + U pada browser desktop anda. Contoh URL untuk font Roboto adalah https://fonts.googleapis.com/css?family=Roboto lalu 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 kode diatas ini harus anda tambahkan dalam tag
<amp-custom>. Contoh sederhana kode tersebut akan menjadi seperti 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 akhir adalah memanggil jenis custom font tersebut dalam website anda dengan menggunakan 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, jika anda sudah menambahkan custom font dengan menggunakan tag
<link>, anda tidak perlu menambahkannya lagi dengan CSS @font-face. Begitu juga sebaliknya. Semoga bermanfaat :)