Guide/Modifica il tuo sito web/Modificare i font di un sito

Modificare i font di un sito

Lo stile dei caratteri di testo sul tuo sito web è noto come carattere. Questa guida ti mostrerà come scegliere i font per il tuo sito.

Font e idoneità del piano

Questa funzionalità è disponibile sui siti con i nostri piani WordPress.com Premium, Business e Commerce, nonché con il piano Pro legacy. Per i siti con i piani gratuito e Personal, aggiorna il tuo piano per accedere a questa funzionalità.

Tutorial video

Guarda un video che mostra come aggiornare i font nei temi a blocchi. Le istruzioni per tutti i tipi di tema sono disponibili nella sezione successiva di questa guida.

Dal corso “Crea il tuo sito web su WordPress.com”

Modificare i font

Puoi modificare i font del tuo sito seguendo questi passaggi.

Per decidere quale sezione di questa guida seguire, visita la tua bacheca e controlla la sezione Aspetto sul lato sinistro. Se trovi Editor, usa la sezione Editor del sito di questa guida. Altrimenti, usa le istruzioni nella sezione Editor di pagina o in Personalizza.

Seleziona la scheda appropriata per l’editor:

Se il tuo sito usa un tema che supporta l’editor del sito, puoi usare l’opzione Stili per modificare i font. Per modificare i font del tuo sito, segui questi passaggi:

  1. Visita la bacheca del tuo sito web.
  2. Vai ad Aspetto → Editor.
  3. Fai clic su Stili a sinistra.
  4. Seleziona l’opzione Tipografia.
  5. Scegli uno dei seguenti elementi di testo sul sito:
    • Testo
    • Link (incluse le voci del menu)
    • Titoli
    • Didascalie
    • Pulsanti
  6. Fai clic sul menu a discesa sotto Font e scegli il font desiderato. Il testo verrà aggiornato in base al font scelto per consentirti di visualizzare un’anteprima.
  7. È possibile modificare altre impostazioni relative al testo, tra cui dimensione, aspetto (grassetto e corsivo), altezza della riga, spaziatura tra lettere e lettere maiuscole/minuscole.
  8. Fai clic su “Rivedi modifiche” o Salva per applicare le modifiche.
L'editor del sito si apre nel pannello Design con il menu Stili selezionato.

Se disponi di un piano di livello superiore, puoi caricare file di font personali.

Applicare un font a un testo specifico

Puoi modificare il font per un blocco specifico (temi e blocchi supportati) usando le impostazioni della tipografia del blocco. In alternativa, puoi applicare un font predefinito a blocchi specifici. Puoi anche usare un blocco Titolo o Citazione per creare un testo davvero unico.

Aggiungere font personalizzati

Oltre ai font disponibili su WordPress.com, puoi aggiungere al tuo sito web anche font personalizzati. Le nostre guide ti mostreranno come installare font da Google Fonts o caricare file di font personali.

Questa funzionalità è disponibile sui siti con i piani WordPress.com Business e Commerce, nonché con il piano Pro legacy. Se disponi di un piano Business, assicurati di attivarlo. Per i siti con i piani gratuito, Personal e Premium, aggiorna il tuo piano per accedere a questa funzionalità.

Gestire i font installati

Questa guida ti mostrerà come disattivare, eliminare o riattivare i font presenti nella tua libreria.

Caricare un file di font

Questa guida ti mostrerà come caricare questi tipi di file per ottenere una varietà più ampia di opzioni tipografiche.

Come evitare il Flash of Unstyled Text

Il Flash of Unstyled Text (FOUT) si verifica quando viene visualizzato brevemente un font diverso prima che appaia quello scelto. In caso di connessioni più lente, il testo viene prima visualizzato nel font predefinito del tema. In questo modo, gli utenti possono iniziare a leggere i contenuti prima del caricamento del font scelto invece di dover attendere di fronte a una pagina vuota. Può quindi apparire un font diverso prima del completamento del caricamento della pagina, ma, nel complesso, si tratta di una soluzione migliore per i visitatori con connessioni più lente, che non visualizzano così una schermata vuota.

Se vuoi rimuovere questa opzione e disponi di un piano idoneo, puoi aggiungere questo codice CSS al tuo sito:

.wf-loading body { visibility: hidden; }

o

html:not(.wf-active) body { display: none; }

Copied to clipboard!