Aggiunta di caratteri

Per velocizzare il caricamento dei documenti, le pagine AMP non possono includere fogli di stile esterni. Tuttavia, c'è un'eccezione a questa regola: i caratteri.

I caratteri personalizzati possono essere inclusi nelle pagine AMP in due modi:

Tramite un tag : solo per i fornitori di caratteri autorizzati.
Utilizzando la regola CSS @font-face: non ci sono restrizioni, tutti i caratteri sono consentiti.

In questa esercitazione, useremo un tag <link> per aggiungere caratteri alla nostra pagina. Aggiungiamo un link al foglio di stile nella sezione <head> per richiedere il carattere Raleway:

<link
  rel="stylesheet"
  type="text/css"
  href="https://fonts.googleapis.com/css?family=Raleway"
/>

Ora aggiorniamo il selettore CSS body per includere un riferimento a Raleway:

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

Aggiorniamo la pagina e controlliamo il nuovo aspetto dei caratteri. Poi, controlliamo il risultato dello strumento di convalida AMP. Non dovrebbero esserci errori per questa richiesta di un foglio di stile esterno.

I caratteri web possono compromettere le prestazioni di un sito, anche se si tratta di un veloce sito AMP. Usiamo la proprietà CSS font-display per ottimizzare il caricamento dei caratteri.

Hai completato il tuo articolo AMP di notizie! Ecco come dovrebbe apparire:

Completed news article

Capitolo precedente Prossimo capitolo