Personalizza lo stile, le dimensioni, il colore e la spaziatura del testo del tuo sito.
Questa guida illustra la modifica dei tipi di carattere del tuo sito, inclusi lo stile, le dimensioni, il colore e la spaziatura dei caratteri. Tutti i siti iniziano con stili di carattere predefiniti che puoi modificare e regolare in Stili sito.
Guarda un video
Come personalizzare i font in Squarespace
Quando rivedi il menu dei tipi di carattere, tieni presente che:
- La nostra raccolta di tipi di carattere comprende 600 Google Fonts e 1.000 Adobe Fonts. Questa selezione non include tutti i tipi di carattere Google o Adobe disponibili. Scorri per sfogliare l'intera libreria o utilizza il campo di ricerca del menu per cercare un carattere specifico.
- Per mantenere brevi i menu, limitiamo ciò che appare in un primo momento, concentrandoci sui tipi di carattere utilizzati di recente e sulle opzioni più popolari. Non tutte le opzioni di formattazione offerte da Google Fonts o Adobe Fonts sono supportate da Squarespace.
Quando scegli i tipi di carattere, tieni presente che:
- I pacchetti di tipi di carattere di Squarespace sono progettati per dare al tuo sito uno stile coeso senza dover scegliere manualmente le diverse impostazioni. I pacchetti di tipi di carattere utilizzano Google Fonts, che sono ampiamente disponibili, per aiutarti a mantenere un brand coerente su tutte le piattaforme.
- Le opzioni di stile relative ai tipi di carattere sono intenzionalmente limitate per mantenere la coerenza in tutto il sito. Per modificare il tipo di carattere a prescindere dalle modifiche disponibili, è possibile aggiungere un tipo di carattere personalizzato utilizzando i fogli di stile CSS. Nella versione 7.0, è possibile aggiungere Adobe Fonts personalizzati.
- Alcuni tipi di carattere possono essere visualizzati in modo diverso a seconda dei dispositivi, ad esempio su Windows o Mac, o su iOS rispetto ad Android. In alcuni casi, diversi browser possono eseguire il rendering dei caratteri in modo diverso, ad esempio nei menu a discesa.
- Occasionalmente, Google e Adobe rimuovono i font dalle loro librerie. I testi del sito che attualmente utilizzano i font rimossi non cambieranno, ma se si passa a un tipo di carattere diverso, non sarà possibile tornare indietro. Invece, sostituiamo il font nella nostra libreria con quello che gli assomiglia di più, in modo che tu possa utilizzare un carattere abbastanza simile.
Quando utilizzi i diversi tipi di carattere sul tuo sito, tieni presente che:
- La maggior parte delle modifiche apportate a una categoria di caratteri (come intestazioni e paragrafi) si applicano a livello di sito. Ad esempio, la modifica del tipo di carattere per il testo dell'Intestazione 1 verrà applicata a tutto il testo impostato come Intestazione 1 nel sito.
- Per creare intestazioni nel corpo del testo, utilizza il menu a discesa Formato nell'Editor del Blocco di testo. Una volta create le intestazioni, puoi modificare gli stili di intestazione. Per maggiori informazioni, visita Formattazione del testo.
- Modificare il formato del testo direttamente nella barra degli strumenti sovrascrive gli stili globali definiti per quella sezione. Ad esempio, se converti l'estratto di un post del blog in Intestazione 1 tramite la barra ed effettui delle modifiche negli stili del sito, le successive modifiche allo stile in questione non avranno effetto su quel testo.
Suggerimento: Per assistenza nella scelta dei tipi di carattere migliori per il tuo sito, visita Scegliere i tipi di carattere e i colori più adatti.
Come funziona il ridimensionamento del testo in Squarespace
Si parla di "ridimensionamento del testo" quando le dimensioni del testo cambiano per riempire una determinata area del sito. Il nostro responsive design assicura che il testo si adatti a qualsiasi dimensione dello schermo. La modalità di ridimensionamento del testo del sito dipende dalla versione del sito.
Il testo viene ridimensionato a seconda delle dimensioni di base del tipo di carattere. Puoi usare il ridimensionamento del testo per riempire un blocco di testo indipendentemente dalle impostazioni del tipo di carattere.
Il testo viene ridimensionato in base alle dimensioni del browser. Alcune famiglie di modelli includono un'opzione per ottimizzare il ridimensionamento del testo.
Trovare un tweak per tipo di carattere
Le modifiche ai tipi di carattere hanno un effetto diverso a seconda della versione del tuo sito.
Per modificare tutti i tipi di carattere a livello di sito:
- Durante la modifica di una pagina, apri Stili sito, quindi clicca su > accanto a Tipi di carattere.
- Clicca su Cambia nel pacchetto di tipi di carattere corrente per visualizzare tutti i pacchetti di tipi di carattere disponibili. Clicca su Sans-Serif, Serif o Misto per visualizzare pacchetti di tipi di caratteri diversi per ogni stile.
- Clicca su un nuovo pacchetto di tipi di carattere per visualizzarlo in anteprima sul sito.
- Clicca su Indietro per tornare al pannello Tipi di carattere e impostare le dimensioni di base del tipo di carattere. Tutto il resto del testo scala in base a questa dimensione.
- Le modifiche rimarranno attive finché continuerai a modificare gli altri contenuti della pagina. Per salvarle, clicca su Salva. Per uscire dalla modalità di modifica, clicca su Esci.
Se non vuoi che Google Fonts o Adobe Fonts (in precedenza, Typekit) vengano caricati sul tuo sito, seleziona uno dei nostri pacchetti di tipi di caratteri integrati:
- Sotto Sans-serif, seleziona Helvetica Neue
- Sotto Serif, seleziona Georgia
- Sotto Misto, seleziona Verdana
Per modificare il tweak per un tipo di carattere specifico:
- Nel pannello Tipi di carattere, clicca su Assegna stili.
- Individua il gruppo di testo specifico che desideri modificare, come Titolo o Pulsante, quindi clicca per aprire tutte le opzioni di modifica per quel gruppo. È inoltre possibile cliccare su qualsiasi testo nell'anteprima della pagina per visualizzarne le opzioni di tweak.
- Fai clic sul menu a discesa accanto al nome del tweak per scegliere un nuovo tipo di carattere. Per personalizzarlo ulteriormente, fai clic su Personalizzato, quindi utilizza le altre opzioni visualizzate.
- Clicca su Mostra tutto o Indietro per tornare all'elenco completo.
Per modificare un tweak per font, apri Stili sito. In base al tuo modello, visualizzerai opzioni e nomi diversi per questi gruppi di font. I tweak per i font possono essere identificati dal titolo del gruppo e da una piccola freccia per visualizzare opzioni aggiuntive.
Se non desideri che Google Fonts o Adobe Fonts (in precedenza Typekit) vengano caricati sul tuo sito, clicca su Imposta tutti i tipi di carattere di sistema nella parte inferiore del pannello Stili sito.
Se non riesci a trovare il gruppo di testo che desideri modificare, consulta la guida del modello e scopri di più sulle opzioni di stile del tuo modello. Puoi anche cliccare direttamente sul testo di una pagina per visualizzare i tweak in Stili sito. Clicca su Mostra tutto per tornare all'elenco completo.
Trova un tipo di carattere specifico
La ricerca dei tipi di carattere funziona in modo diverso a seconda della versione di Squarespace su cui si trova il tuo sito.
Per utilizzare un tipo di carattere Google specifico, cercalo nell'opzione Esplora tutti i tipi di carattere.
- Apri il pannello Stili sito, quindi clicca su > accanto a Tipi di carattere.
- Clicca sul tipo di testo che desideri modificare: Intestazioni, Paragrafi, Pulsanti o Varie.
- Clicca sul nome del tipo di carattere
- Scorri per sfogliare i tipi di carattere disponibili o cercane uno digitandone il nome nel campo Cerca tipo di carattere, nella parte superiore del pannello. Per sfogliare Adobe Fonts, clicca su Sfoglia tipi di carattere legacy nella parte inferiore dell'elenco.
- Le modifiche rimarranno attive finché continuerai a modificare gli altri contenuti della pagina. Per salvarle, clicca su Salva. Per uscire dalla modalità di modifica, clicca su Esci.
Suggerimento: La categoria Varie si applica alla maggior parte del testo diverso da un titolo o da un testo normale di paragrafo, come i prezzi dei prodotti, la navigazione nei Blocchi menu e altri metadati di contenuto.
Per utilizzare un tipo di carattere Google o Adobe specifico, utilizza il campo di ricerca all'interno di un tweak tipo di carattere per trovarlo.
- Apri il pannello Design, quindi fai clic su Stili sito.
- Clicca sul tweak tipo di carattere che desideri modificare, quindi clicca sul menu a discesa accanto al nome del tipo di carattere.
- Scorri per sfogliare i font disponibili o per cercane uno digitandone il nome nel campo Cerca tipi di carattere, nella parte superiore del menu.
- Fai clic sul tipo di carattere che desideri utilizzare, quindi fai clic su Salva nella parte superiore del pannello per applicare le modifiche.
Se non hai in mente un tipo di carattere, Google e Adobe hanno risorse per cercare e visualizzare in anteprima i tipi di carattere sulle loro piattaforme:
Quando trovi un tipo di carattere che ti piace, cercalo in Squarespace. Nota: alcuni tipi di carattere potrebbero non essere disponibili.
Definisci un tipo di carattere
Lo stile dei tipi di carattere funziona in modo diverso a seconda della versione di Squarespace in cui si trova il tuo sito.
Per definire i tuoi tipi di carattere:
- Apri il pannello Stili sito, quindi clicca su > accanto a Tipi di carattere.
- Clicca sul tipo di testo che desideri modificare: Intestazioni, Paragrafi, Pulsanti o Varie.
- Il nome del tipo di carattere viene visualizzato nella parte superiore. Modifica lo stile usando le diverse opzioni di formattazione e dimensione.
- Le modifiche rimarranno attive finché continuerai a modificare gli altri contenuti della pagina. Per salvarle, clicca su Salva. Per uscire dalla modalità di modifica, clicca su Esci.
Adatta gli stili come elencato nella tabella seguente.
Suggerimento: Per modificare il colore del testo, modifica i colori del sito o della sezione. In un Blocco di testo, puoi utilizzare anche la barra degli strumenti di testo.
|
Nome stile |
Opzioni |
|
Peso |
Rendi il testo più spesso o più sottile. |
|
Stile |
Imposta il testo sui formati normale, grassetto, corsivo o altri, a seconda del tipo di carattere. |
|
Altezza riga |
Cambia lo spazio tra le righe di testo. |
|
Spaziatura tra lettere |
Cambia lo spazio tra le lettere. |
|
Trasformazione testo |
Applica il maiuscolo a una parte, tutto, o nessuna parte del testo. Questo tweak si applica solo a determinati tipi di carattere. |
|
Taglia |
Rendi il testo più grande o più piccolo. Ogni tipo di testo presenta una o più opzioni di dimensione. Ad esempio, le Intestazioni includono cursori per la formattazione Intestazione 1, Intestazione 2, Intestazione 3 e Intestazione 4 nella sezione Dimensioni. Puoi inoltre modificare le dimensioni del testo nei singoli Blocchi di testo utilizzando la barra degli strumenti di testo. |
Clicca sul tweak di un font per aprire le opzioni aggiuntive, come nome del font, dimensioni e spaziatura tra le lettere.
A seconda del testo e del modello specifici, puoi regolare le opzioni tipografiche elencate nella tabella sottostante. Per font e modelli diversi sono disponibili altre opzioni di stile e tweak.
Suggerimento: Per modificare il colore del testo, utilizza il tweak di colore per quel tipo di testo in Stili sito. Per maggiori informazioni, visita Modificare i colori.
|
Nome tweak |
Opzioni |
|
Font |
Seleziona o cerca un font Google o Adobe Font. Nella parte superiore del menu visualizzerai una selezione dei migliori font. Scorri verso il basso per sfogliare la nostra libreria completa o utilizza il campo di ricerca nella parte superiore del menu, se conosci il nome di un font che desideri usare. |
|
Dimensioni |
Utilizza il cursore o digita la dimensione del font manualmente. |
|
Altezza riga |
Imposta la spaziatura tra le righe. Considera che se l'altezza della riga è pari a 0 em, questo potrebbe causare la sovrapposizione del testo, in particolare sui dispositivi mobili. |
|
Spaziatura tra lettere |
Permette di impostare la spaziatura tra le lettere. L'uso di valori negativi può causare la sovrapposizione dei caratteri. |
|
Trasformazione testo |
Seleziona Nessuno, Iniziali maiuscole, Maiuscolo o Minuscolo. |
|
Decorazione testo |
Seleziona Nessuno, Sottolinea, Sopralinea o Barrato. |
|
Allineamento testo |
Seleziona Sinistra, Centro o Destra. |
Aggiungi un Adobe Font personalizzato (solo versione 7.0)
Se hai un tipo di carattere personalizzato, puoi aggiungerlo al tuo sito Squarespace versione 7.0 utilizzando la nostra integrazione con Adobe Fonts. Gli Adobe Fonts personalizzati non sono supportati nella versione 7.1.
- Questo processo sostituisce le opzioni di Adobe Fonts nei menu Stili sito con i tipi di carattere del progetto personalizzato. Gli Adobe Fonts di Squarespace non saranno disponibili per l'uso mentre il progetto Adobe Fonts personalizzato è abilitato.
- I tipi di carattere personalizzati sono disponibili con un abbonamento Adobe Creative Cloud. Prima di abbonarti, scegli un piano che includa gli Adobe Fonts.
Step 1 - Crea un progetto Web e aggiungi tipi di carattere
Per aggiungere i tipi di carattere personalizzati a Squarespace, devi prima creare un progetto Web in Adobe. Accedi al tuo account Adobe Fonts, quindi segui gli step per creare un progetto Web.
Dopo aver creato il progetto Web, vedrai il tuo codice di incorporamento HTML personalizzato. Non ti servirà, pertanto non aggiungerlo al tuo sito. Utilizza invece lo step successivo per ottenere l'ID del progetto Web, che è più breve.
Step 2 - Aggiungi i tuoi tipi di carattere personalizzati a Squarespace
Una volta che il progetto Web include tutti i tipi di carattere di cui hai bisogno, aggiungilo al tuo sito Squarespace usando l'ID del progetto.
- Nel tuo account Adobe Fonts, clicca su Il mio Adobe Fonts nell'angolo in alto a destra.
- Clicca su Progetti Web, quindi individua il progetto che desideri aggiungere a Squarespace.
- Copia l'ID del progetto, una stringa di lettere e numeri sopra il codice da incorporare. Assicurati di copiare l'ID progetto univoco e non quello mostrato nell'esempio.
- Apri il pannello Strumenti per sviluppatori.
- Fai clic su Chiavi API esterne.
- Scorri verso il basso fino alla casella ID Progetto Adobe Fonts.
- Incolla l'ID del progetto copiato da Adobe nella casella.
- Fai clic su Salva.
Step 3 - Utilizza i tipi di carattere Adobe Fonts
Dopo aver aggiunto i tipi di carattere Adobe Fonts, puoi applicarli al testo sul tuo sito. I tipi di carattere nel tuo progetto Web sostituiscono i font Adobe Fonts integrati nel riquadro Stili Sito. Per trovare rapidamente il tuo tipo di carattere Adobe Fonts personalizzato, cercalo in base al nome nella casella Cerca.
Gestire le modifiche ai tipi di carattere
- Se apporti modifiche al tuo Adobe Fonts, pubblicalo nuovamente per visualizzarle su Squarespace. Per maggiori informazioni, consulta la documentazione di Adobe.
- Se Adobe Fonts rimuove un font che stai utilizzando dalla raccolta, questo verrà comunque caricato sul tuo sito. Tuttavia, non potrai applicarlo a un nuovo testo o tornare a esso se lo cambi perché non apparirà più in Stili sito.
In Stili sito appare il messaggio "Font non supportati"
Questo messaggio viene visualizzato se il tuo sito sta utilizzando un tipo di carattere che Adobe Fonts ha ritirato. Quando il tipo di carattere non è più supportato, verrà sostituito in Squarespace con il tipo di carattere più simile disponibile. Rivedi le sezioni di stile elencate nell'errore per approvare o modificare il tipo di carattere sostitutivo.
Adobe Fonts rimuoverà i tipi di carattere ritirati anche dalla tua pagina Adobe Fonts.
I miei Adobe Fonts personalizzati non vengono visualizzati sul mio sito
Se alcuni caratteri speciali non vengono visualizzati correttamente, modifica il progetto Web e seleziona Tutti i caratteri prima di aggiungere l'ID progetto a Squarespace.
Se nessuno dei tuoi font viene visualizzato, verifica l'eventuale presenza di un codice JavaScript aggiunto al tuo sito. Se in passato hai aggiunto dei font al tuo sito utilizzando il metodo JavaScript di Adobe Fonts, potrebbe essersi verificato un errore di caricamento. Rimuovi il codice JavaScript e segui la procedura sopra riportata per aggiungere i tuoi font ad Adobe Fonts.
Dove richiedere assistenza
In caso di problemi durante l'aggiunta dell'ID del progetto Adobe Fonts o se i tipi di carattere Adobe Fonts non sono visualizzati sul sito, contattaci e ti aiuteremo a risolvere questi problemi. Per tutte le altre domande sull'uso di Adobe Fonts, contatta direttamente l'azienda o consulta documentazione specifica.
Risoluzione dei problemi relativi al tipo di carattere
Prima di seguire questi passaggi, verifica se il problema è legato al browser. Se la procedura per la risoluzione dei problemi del browser non risolve il problema, consulta questa sezione per individuare altre problematiche comuni che possono verificarsi durante la modifica dei tipi di carattere.
Ho copiato e incollato il testo, ma non corrisponde alla mia formattazione
Quando si copia e incolla del testo, è possibile che venga copiata anche la sua formattazione. Questo può interferire con il codice CSS di Squarespace e il testo sarà visualizzato in modo diverso rispetto alle opzioni di stile impostate in Stili sito.
Per evitarlo, ti consigliamo di copiare e incollare il testo in un programma di elaborazione testi che elimina l'eventuale formattazione speciale, oppure di utilizzare un tasto di scelta rapida per rimuovere la formattazione.
- In Windows, premi Ctrl + Maiusc + V quando incolli il testo per rimuovere la formattazione.
- Su Mac, premi ⌘ + Maiusc + V quando incolli testo per rimuovere la formattazione.
- Puoi anche incollare il testo senza formattazione facendo clic sull'icona degli appunti . Se hai già inserito il testo, rimuovi la formattazione evidenziando il testo e facendo clic sull'icona Rimuovi formattazione.
I font appaiono diversamente dopo aver eseguito l'accesso al sito
Il modo in cui i tipi di carattere vengono visualizzati sul tuo sito live può essere influenzato dal tuo dominio.
Se hai connesso un dominio di terze parti al sito, contatta il provider di dominio per assicurarti di non avere impostato l'inoltro mascherato. Il mascheramento controlla il modo in cui il dominio effettua il reindirizzamento al sito e può interferire con le impostazioni di stile di Squarespace.
Non riesco a impostare una dimensione specifica per il mio tipo di carattere
Se non è possibile impostare il tipo di carattere su specifiche dimensioni px (pixel), è possibile che il tuo sito utilizzi invece un valore em o rem.
- Tutti i siti della versione 7.1 utilizzano valori rem per le dimensioni del tipo di carattere. Ciò significa che la sua dimensione dipende dalla dimensione del carattere di base. Per modificare il valore rem di un tipo di carattere, utilizza il cursore o fai clic sul valore corrente e immetti manualmente un nuovo valore. Per modificare la dimensione del carattere di base, regola la dimensione di base sul pacchetto dei tipi di carattere.
- Per i siti della versione 7.0, alcuni modelli usano em piuttosto che px per la dimensione del tipo di carattere e della spaziatura. Se si inserisce un valore direttamente nel campo numero, è possibile mantenere la dimensione scalabile con il valore em o inserire px per mantenerlo fisso. Tuttavia, se il modello utilizza solo un valore px , non inserire un valore em al suo posto, in quanto ciò può impedire al tipo di carattere di ridimensionarsi correttamente su schermi più piccoli.
Il mio tipo di carattere è difficile da leggere su dispositivi mobili
I tipi di carattere con uno spessore inferiore a 100 possono apparire molto chiari o molto scuri sui dispositivi mobili più piccoli. Per mantenere il testo visibile su tutti i dispositivi, apri Stili sito e assicurati di impostare uno spessore del tipo di carattere superiore a 100.