Ricerca

Uso di un font Google in una landing page

💡 Buono a sapersi
Le landing pages sono disponibili per i piani Business e Enterprise.

In questo articolo, spiegheremo come importare e utilizzare un font Google in una landing page.

1️⃣ Recuperare il codice di importazione CSS

Per recuperare l'URL di un font Google:

  1. Vai a https://fonts.google.com/.
  2. Seleziona la famiglia di caratteri che desideri utilizzare nella landing page.
    font-en_us.png
  3. Nella sezione Stili, aggiungi gli stili desiderati cliccando su "Nome dello stile" +. Lo stile verrà visualizzato nel pannello Review (Rivedi) a destra:select-font-en_us.png
  4. Nella sezione Use on the web (Usa sul web), seleziona l'opzione @import. Troverai il codice CSS per l'URL del font Google e le regole CSS per specificare le famiglie.
    css_code_rules-en_us.png

2️⃣ Creare un CSS personalizzato

💡 Buono a sapersi
Aggiungi un font di riserva nel caso in cui il browser o il sistema del destinatario non supportino il font Google importato. 

Per creare un CSS personalizzato:

  1. Copia il codice CSS per l'URL del font Google.
  2. Utilizza le classi font-style-title, font-style-subtitle, font-style-head e font-style-normalText rispettivamente per gli stili Titolo, Sottotitolo, Intestazione e Corpo normale nella landing page e specifica le relative famiglie.
  3. Aggiungi la regola !important alla fine di ogni riga di codice per assicurarti che tutte le regole di stile precedenti vengano sovrascritte e che il font personalizzato visualizzato nella versione pubblicata della landing page sia quello giusto.

Nell'esempio seguente, abbiamo creato il codice CSS per importare il font Google "Source Sans Pro" dal sito web di Google (https://fonts.google.com/specimen/Source+Sans+Pro):

<style> @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');
.font-style-title {font-family:'Source Sans Pro', sans-serif !important; } .font-style-subtitle {font-family: 'Source Sans Pro', sans-serif !important; } .font-style-heading {font-family: 'Source Sans Pro', sans-serif !important; } .font-style-normalText {font-family: 'Source Sans Pro', sans-serif !important; } </style>

3️⃣ Aggiungere un CSS personalizzato alla landing page

  1. Nell'editor della landing page, clicca su Impostazioni nell'angolo in basso a sinistra.
    settings-en_us.png

  2. Apri la scheda Tracciamento.

  3. Nel Tag Head, aggiungi il tuo CSS personalizzato.
    add_css-en_us.png

  4. Clicca su Fatto.
  5. Se la tua landing page è già stata pubblicata, clicca su Avvia e pubblicala di nuovo per implementare le modifiche.

🤔 Domande?

In caso di domande, non esitare a contattare il team dell’assistenza creando un ticket dal tuo account. Se ancora non hai un account, puoi contattarci qui.

Se stai cercando aiuto per un progetto che prevede l'utilizzo di Brevo, possiamo metterti in contatto con il giusto partner esperto certificato Brevo.

💬 Questo articolo ti è stato utile?

Utenti che ritengono sia utile: 5 su 18