Come posso applicare un font diverso esclusivamente ai titoli dei post e uno differente per il testo normale.

Titolo del post con occhiello, sommario e corsivo in Blogger | IdpCeIn

Per applicare un font a un gruppo specifico di elementi (come i titoli dei post) e un altro differente per il testo normale, devi importare entrambi i font da Google Fonts e poi mapparli tramite selettori CSS mirati.

1.Carica due font da Google Fonts:Importazione multipla.

Vai su Google Fonts, seleziona il primo font per il testo (es. Inter) e poi un secondo font per i titoli (es. Playfair Display o Merriweather). Nel pannello laterale di Google Fonts, copia il codice HTML unificato nel tag <link> che include entrambe le famiglie, oppure inserisci i due link separati nell'intestazione del tema (prima di </head>):

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;500&family=Playfair+Display:wght@600;700&display=swap" rel="stylesheet">

Verifica: Entrambi i font sono richiamati correttamente nell'intestazione HTML del blog.

2.Assegna i font ai rispettivi elementi:Regole CSS.

Individua il tag ]]></b:skin> all'interno del tema e inserisci subito prima il codice CSS per differenziare il corpo del testo e i titoli dei post:

CSS

<style>
  /* 1. Font per il testo normale (Corpo del blog) */
  body {
    font-family: 'Inter', sans-serif, system-ui;
    font-size: 16px;
    color: #333333;
  }

  /* 2. Font esclusivo per i titoli dei post di Blogger */
  .post-title, .post-title a, h1.post-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    letter-spacing: -0.02em;
  }
</style>

Nota: La classe .post-title è quella standard utilizzata dalla maggior parte dei temi nativi di Blogger per identificare i titoli degli articoli sia nella home page che nella pagina del singolo post.

Verifica: Le proprietà font-family puntano esattamente ai nomi delle due diverse famiglie di caratteri caricate.

3.Salva le modifiche:Salvataggio e Verifica.

Clicca sull'icona del dischetto in basso a destra per salvare il tema e ricarica il blog.

Verifica: Il testo normale del blog utilizza il primo font scelto, mentre i titoli dei post mostrano chiaramente il secondo stile tipografico.

Commenti

nome-foto