Ajout de polices
Dans AMP, pour réduire au maximum les temps de chargement des documents, vous ne pouvez pas inclure de feuilles de style externes. Cependant, il existe une exception à cette règle : les polices.
Vous pouvez intégrer des polices personnalisées dans votre page AMP de deux manières :
- Via une balise
<link>: pour les fournisseurs de polices autorisés uniquement. - En utilisant la règle CSS
@font-face: il n'y a pas de restrictions, toutes les polices sont autorisées.
Dans ce didacticiel, nous utiliserons une balise <link> pour ajouter des polices à notre page. Ajoutez un lien de feuille de style dans la section <head> pour demander la police Raleway :
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Raleway"
/>
Maintenant, mettez à jour votre sélecteur de body CSS pour inclure une référence à Raleway :
body {
width: auto;
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
Actualisez votre page et découvrez sa nouvelle apparence. Inspectez également la sortie du validateur AMP. Il ne devrait y avoir aucune erreur pour cette demande de feuille de style externe.
font-display pour optimiser le comportement de chargement de vos polices. Vous avez terminé votre article d'actualité AMP ! Voici à quoi il devrait ressembler :