Come integrare un carattere personalizzato di Google Fonts nel tema di Blogger.

Per integrare un carattere personalizzato di Google Fonts nel tuo tema di Blogger, è necessario prelevare il codice di incorporamento dalla libreria di Google e aggiungerlo direttamente all'interno della struttura HTML del template.

1.Ottieni il codice da Google Fonts:Scelta del font.

Vai sul sito di Google Fonts, cerca il carattere che preferisci (ad esempio Inter, Roboto o Lora), seleziona i pesi che intendi utilizzare (es. Regular 400, Bold 700) e copia il codice HTML fornito nella sezione Get embed code (scegliendo l'opzione <link>).

Verifica: Hai copiato negli appunti i tag <link> che puntano ai fogli di stile di Google Fonts.

2.Incolla il codice nell'HTML di Blogger:Modifica Header.

Accedi alla dashboard di Blogger, vai su Tema, clicca sui tre puntini accanto a Personalizza e seleziona Modifica HTML. Cerca il tag di chiusura <head> (o posizionati subito prima di </head>) e incolla il codice copiato da Google.

XML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Verifica: I link di Google Fonts sono inseriti correttamente all'interno dell'intestazione del documento.

3.Assegna il font agli elementi del blog:Applicazione CSS.

Individua il tag ]]></b:skin> all'interno del tema e inserisci subito prima il blocco CSS per applicare il nuovo carattere al corpo del testo o ai titoli:

CSS

<style>
  body {
    font-family: 'Inter', sans-serif, system-ui;
  }
  
  /* Esempio per applicare il font personalizzato anche ai titoli */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif, system-ui;
    font-weight: 700;
  }
</style>

Verifica: La proprietà font-family richiama esattamente il nome del font scelto su Google Fonts.

4.Salva e verifica il risultato:Salvataggio.

Clicca sull'icona del dischetto in basso a destra per salvare le modifiche al tema e apri il blog in una nuova scheda.

Verifica: I testi della pagina riflettono il nuovo stile grafico del carattere scelto.