Usa i font del tuo brand nelle pagine del builder.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

DXPR Builder non ha una propria impostazione per i font: il testo nelle pagine del builder usa i font del tuo tema. Per cambiarli, carica un web font nel tema e punta a esso il CSS del tema. Alla fine, ogni pagina del builder mostra il font del tuo brand, nell’editor e per i visitatori. Se il tuo sito usa DXPR Theme, scegli invece i font nelle sue impostazioni del tema.

Prima di iniziare

  • Serve accesso ai file del tuo tema; usa un tema personalizzato o un sotto-tema.
  • Verifica che la licenza del font ne consenta l’uso su un sito web.
  • I passaggi usano la libreria global-styling e css/custom.css da CSS personalizzato.

Configurazione

  1. Aggiungi il foglio di stile del font alla libreria in mytheme.libraries.yml. Per un font Google:

    global-styling:
  css:
    theme:
      'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap': { type: external }
      css/custom.css: {}

  2. Imposta il font in css/custom.css:

    body {
  font-family: 'Inter', sans-serif;
}

  3. Svuota le cache in Configuration > Development > Performance (/admin/config/development/performance).

  4. Apri una pagina nel builder e guarda un elemento Text.

Ospita il font in proprio

Un font ospitato in proprio evita una richiesta a terzi, cosa che può contare per le norme sulla privacy.

  1. Scarica il font in formato WOFF2 e metti i file nella cartella fonts/ del tema.

  2. Dichiara ogni peso in css/custom.css, sopra la regola del passaggio 2:

    @font-face {
  font-family: 'BrandFont';
  src: url('../fonts/brandfont.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

  3. Usa 'BrandFont' nelle tue regole font-family, rimuovi la riga Google dalla libreria e svuota le cache.

Cosa vedrai

Il testo in ogni elemento del builder usa il nuovo font, in modalità di modifica e nella pagina pubblicata. Il pannello Style di ogni elemento imposta ancora dimensione e colore; vedi Modifica dimensione e colore del testo.

Il pulsante Font family dell’editor di testo è disattivato per impostazione predefinita. Elenca i font web-safe standard di CKEditor, non i tuoi, quindi lascialo disattivato per mantenere gli editor in linea con il brand.

DXPR Theme

DXPR Theme ha le sue impostazioni per i font. Vai in Appearance, apri le impostazioni di DXPR Theme (/admin/appearance/settings/dxpr_theme) ed espandi Fonts. Imposta separatamente Base Font, Headings, Navigation, Site Name e Blockquote, quindi non ti serve CSS per questi.

Se non vedi il font

  • Il testo mostra ancora il vecchio font. La libreria non è caricata, oppure la cache contiene il vecchio CSS. Verifica che mytheme.info.yml elenchi la libreria, poi svuota le cache in /admin/config/development/performance.
  • I titoli o alcuni riquadri mantengono un altro font. Una regola del tema per quell’elemento è più specifica di body. Ispeziona il testo nel browser e aggiungi il suo selettore alla tua regola.
  • Un paragrafo mostra un font diverso. Un editor vi ha applicato Font family. Seleziona il testo e fai clic su Remove format, poi togli la spunta a Font family nel profilo; vedi Editor di testo.

Prossimi passi