Cambia il font predefinito sul tuo sito

[Discourse]

Questa guida spiega come cambiare il carattere predefinito sul tuo sito Discourse, sia per elementi specifici sia utilizzando una libreria di caratteri diversa da Google Fonts.

Livello utente richiesto: Amministratore

Questa guida è necessaria solo se desideri integrare una libreria di caratteri diversa da Google Fonts o se desideri cambiare il carattere solo di alcune parti del sito. Se stai utilizzando Google Fonts e desideri cambiare il carattere globalmente su tutto il sito, prova invece questo componente tema: Google Fonts.

Questa guida tratterà:

• Utilizzo delle impostazioni dei caratteri integrate
• Modifica del carattere del sito con un carattere personalizzato
• Applicazione di caratteri diversi a elementi specifici

Impostazioni dei caratteri integrate

Discourse include un selettore di caratteri integrato con una selezione di caratteri inclusi. Questo è il modo più semplice per cambiare il carattere del tuo sito senza alcun CSS personalizzato.

Vai su Admin \u003e Appearance \u003e Fonts per accedere alla pagina delle impostazioni dei caratteri. Da qui puoi impostare:

• Carattere di base — utilizzato per la maggior parte del testo sul sito (predefinito: Inter)
• Carattere dei titoli — utilizzato per i titoli (predefinito: Inter)
• Dimensione predefinita del testo — la dimensione predefinita del testo per tutti gli utenti

Queste impostazioni utilizzano le proprietà personalizzate CSS --font-family e --heading-font-family sotto il cofano, che anche i temi possono sovrascrivere.

Modifica del carattere con un carattere personalizzato

Se desideri utilizzare un carattere non incluso nell’elenco integrato (ad esempio, da Google Fonts o da un file di carattere ospitato autonomamente), puoi farlo tramite un componente tema.

1. Crea un nuovo componente tema

   Vai su Admin \u003e Appearance \u003e Themes & Components \u003e Install \u003e Create New. Scegli un nome e seleziona “Component”.

2. Modifica CSS/HTML

   Fai clic sul pulsante “Edit CSS/HTML”.

   

3. Aggiungi il carattere utilizzando Google Fonts

   Se desideri utilizzare un font web di Google, aggiungi quanto segue alla scheda Common \u003e CSS:

   @import url(https://fonts.googleapis.com/css?family=Oswald);
   
   html {
       --font-family: 'Oswald', sans-serif;
       --heading-font-family: 'Oswald', sans-serif;
   }
   

   Assicurati che la riga @import url sia posizionata all’inizio del foglio di stile.

   In questo esempio, Oswald è il nome del carattere.

   Se c’è un problema con il metodo @import url, puoi utilizzare in alternativa il metodo <link> inserendo la riga appropriata nella scheda Common \u003e /head del tuo componente tema:

   <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
   

   Questo metodo cambierà il carattere del sito globalmente.

4. Applica i caratteri a elementi specifici
   Puoi anche cambiare il carattere del sito solo per alcuni elementi.

   Per cambiare il carattere solo per alcuni elementi, come la barra di navigazione o i titoli degli argomenti, aggiungi:

   @import url('https://fonts.googleapis.com/css?family=Oswald:200,300');
   
   .navigation-container, .link-top-line {
       font-family: 'Oswald', sans-serif;
   }
   

   

   In alternativa, per cambiare il carattere di una categoria specifica, usa:

   body.category-CATEGORY-NAME {
       font-family: 'YOUR-NEW-FONT';
   }
   

5. Aggiungi il nuovo componente ai temi principali

   Assicurati di aggiungere il componente tema appena creato a tutti i temi principali che gli utenti possono selezionare: