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

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
Posta un commento