Yazı tipi ekleme
AMP'de, belgelerin yükleme sürelerini mümkün olduğunca hızlı tutmak için harici stil sayfalarını ekleyemezsiniz. Ancak, bu kuralın bir istisnası vardır. Yazı tipleri.
AMP sayfanıza özel yazı tiplerini iki şekilde yerleştirebilirsiniz:
- Bir
<link>etiketi aracılığıyla: yalnızca izin verilen yazı tipi sağlayıcıları için. @font-faceCSS kuralını kullanarak: herhangi bir kısıtlama yoktur, tüm yazı tiplerine izin verilir.
Bu öğreticide, sayfamıza yazı tipleri eklemek için bir <link> etiketi kullanacağız. Raleway yazı tipini istemek için dosyasına bir stil sayfası bağlantısı ekleyin:
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Raleway"
/>
Şimdi, CSS body seçicinizi Raleway'e bir referans içerecek şekilde güncelleyin:
body {
width: auto;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
Sayfanızı yenileyin ve sayfanızın yeni görünümünü kontrol edin. Ayrıca, AMP doğrulayıcının çıkışını kontrol edin. Bu dış stil sayfası isteği için herhangi bir hata olmamalıdır.
Web yazı tipleri, aksi takdirde hızlı bir AMP sitesinde bile bir web sitesinin performansına zararlı olabilir. Yazı tiplerinizin yükleme davranışını optimize etmek için
font-display CSS özelliğini kullanın. AMP haber makalenizi tamamladınız! İşte nasıl görünmesi gerektiği burada: