Ricerca

Uso di un font Google in una pagina di destinazione

clickable_banner-pricing_3_en-us.png

In questo articolo, spiegheremo come importare e utilizzare un font Google in una pagina di destinazione.

1️⃣ Recuperare il codice di importazione CSS

Per recuperare l'URL di un font Google:

  1. Vai a https://fonts.google.coem/.
  2. Seleziona la famiglia di caratteri che desideri utilizzare nel tuo landing page.
    font-en_us.png
  3. Nella sezione Styles (Stili), aggiungi gli stili che desideri cliccando su Seleziona "Name of style" (Nome dello stile) +. Lo stile verrà visualizzato nel pannello Selected family (Famiglia selezionata) 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 carattere di riserva nel caso in cui il browser o il sistema del destinatario non supporti il carattere Google importato. 

Per creare un CSS personalizzato:

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

Nell'esempio seguente, abbiamo costruito il codice CSS per importare il carattere di Google "Roboto" dal carattere del sito web di Google (https://fonts.google.com/specimen/Roboto):

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

3️⃣ Aggiungere un CSS personalizzato alla pagina di destinazione

  1. Vai a Marketing > Landing page.
  2. Seleziona la landing page in cui desideri utilizzare il carattere Google.

  3. Nell'editor landing page, clicca su Settings (Impostazioni) nell'angolo in basso a sinistra.
    settings-en_us.png

  4. Apri la scheda Tracciamento.

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

  6. Clicca su Fatto.
  7. Se la tua pagina di destinazione è 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 l'agenzia partner di Brevo giusta per te.

💬 Questo articolo ti è stato utile?

Utenti che ritengono sia utile: 8 su 30