Menambahkan font
Di AMP, agar kecepatan waktu pemuatan dokumen tetap maksimal, Anda tidak dapat menyertakan lembar gaya (stylesheet) eksternal. Namun, ada satu pengecualian untuk aturan ini—font.
Anda dapat menyematkan font kustom ke halaman AMP Anda dengan dua cara:
- Melalui tag
<link>: hanya untuk penyedia font yang diizinkan. - Dengan menggunakan aturan CSS
@font-face: tidak ada batasan, semua font diizinkan.
Di dalam tutorial ini, kita akan menggunakan tag <link> untuk menambahkan font ke halaman. Tambahkan tautan lembar gaya di <head> untuk meminta font Raleway:
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Raleway"
/>
Sekarang, perbarui pemilih body CSS Anda untuk menyertakan referensi ke Raleway:
body {
width: auto;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
Segarkan halaman Anda, lalu lihat tampilan serta nuansa barunya. Selain itu, periksa output validator AMP. Seharusnya tidak ada eror untuk permintaan lembar gaya eksternal ini.
font-display untuk mengoptimalkan perilaku pemuatan font Anda. Anda telah menyelesaikan artikel berita AMP Anda! Artikel Anda akan terlihat seperti yang berikut ini: