Come aggiungere caratteri personalizzati a Squarespace come un professionista

Vuoi aggiungere caratteri personalizzati a Squarespace?

Se sei un utente Squarespace, sai già che la piattaforma include alcune solide opzioni di font. Ma ci sono molti motivi per aggiungere font ai siti Web Squarespace!

Di solito, è un font di marca, o anche uno su misura che hai fatto.

Forse si tratta più di un aspetto particolare che vuoi creare per gli elementi all'interno del tuo sito web.

Qualunque sia il motivo, è facile aggiungere font personalizzati a Squarespace: segui questa procedura!

Come aggiungere un carattere personalizzato al tuo sito web Squarespace

Aggiungere un font che scegli al tuo sito Web Squarespace è piuttosto semplice, ma c'è un piccolo CSS da aggiungere.

Assicurati di essere d'accordo prima di iniziare, o prendi qualcuno che lo è.

Passaggio 1. Scegli il tuo carattere

Se hai già scelto il carattere che desideri utilizzare, vai al passaggio successivo. Altrimenti, assicurati di aver scelto un font che puoi utilizzare legalmente sul tuo blog.

Ci sono un sacco di posti dove trovare font gratuiti ea pagamento, come Creative Market. Ma controlla la licenza prima di aggiungerne una al tuo sito web.

Passaggio 2. Prepara i file dei font web

Per aggiungere un font al sito Web, avrai bisogno di tre formati di file di font:

1. .ttf o .otf
2. .woff
3. .woff2

A volte potresti avere un tipo di file di font web e, se lo fai, salta questo passaggio. Puoi usare solo quello.

Altrimenti, tieni i tre tipi di file pronti per essere aggiunti.

Passaggio 3. Carica i file dei caratteri su Squarespace

Vai a Design > CSS personalizzato > Gestisci file personalizzati

Qui aggiungerai i caratteri tramite il pulsante di caricamento.

Ripeti l'operazione per tutti e tre i file o per il file di font web se è quello che hai.

Passaggio 4. Assegna un nome al tuo carattere personalizzato in Squarespace

Una volta caricato il carattere, devi dire a Squarespace dove e cosa si trova con l'editor CSS.

Usa il seguente codice:

 @font-face { font-family: 'font-name'; src: url(URL.ttf/.otf), url(URL.woff), url(URL.woff2); }

Prendi questo e aggiungi le informazioni rilevanti per il tuo carattere:

• Nome del carattere: sostituiscilo con il nome del tuo carattere in base al nome del file o qualcosa che ricorderai.
• URL dei caratteri: sostituiscilo con gli URL dei caratteri appena caricati. Prendi l'URL dalla tua area di caricamento (nello stesso modo in cui faresti per l'URL di un'immagine) e aggiungilo al suo posto.

Passaggio 5. Definisci dove e come utilizzare il carattere personalizzato

Infine, devi solo dire a Squarespace dove utilizzare i diversi caratteri sul tuo sito web.

Questo può trovarsi in luoghi come le intestazioni o l'intestazione del sito, i pulsanti o anche qualcosa come il blocco della newsletter.

Come usare il font nei luoghi comuni

Dopo aver caricato il font, puoi iniziare a fornire a Squarespace informazioni specifiche su dove usarlo.

Ecco alcuni esempi popolari e come farlo.

Come modificare i caratteri dell'intestazione del sito

L'intestazione del sito è l'area nella parte superiore della barra di navigazione.

Potresti avere molti link qui, un logo testuale e forse un annuncio.

Il carattere di tutti questi può essere modificato utilizzando il seguente snippet CSS:

 // Site Title // .header-title-text a { font-family: YOURNAME !important; } // Site Navigation // .header-nav-item a { font-family: YOURNAME !important; } // Button // .header-actions-action .btn { font-family: YOURNAME !important; } // Announcement Bar // .sqs-announcement-bar-url a { font-family: YOURNAME !important; }

Ricordati di sostituire YOURNAME con il nome del tuo font.

Come modificare i caratteri dei pulsanti

Un altro luogo popolare per utilizzare i caratteri personalizzati è sui pulsanti del tuo sito web.

Sono disponibili tre pulsanti: Small, Medium e Large. Puoi modificarne uno o tutti con il seguente codice:

 // Small Button // .sqs-block-button-element--small { font-family: YOURNAME !important; } // Medium Button // .sqs-block-button-element--medium { font-family: YOURNAME !important; } // Large Button // .sqs-block-button-element--large { font-family: YOURNAME !important; } // Image Block Button // .image-button a { font-family: YOURNAME !important; }

Ricordati di sostituire YOURNAME con il nome del tuo font.

Appuntalo su Pinterest in modo da poter tornare più tardi!

(Altri suggerimenti sui caratteri personalizzati e risoluzione dei problemi dopo la grafica).

Come modificare i caratteri del blocco della newsletter

Il blocco Newsletter consente alle persone di iscriversi alla tua lista e-mail. Molte persone usano plugin diversi per questo.

Ma se usi il blocco all'interno di Squarespace, il codice seguente ti consentirà di aggiungere un carattere personalizzato.

 // Newsletter Form Title //.newsletter-form-header-title { font-family: YOURNAME !important; } // Newsletter Form Description //.newsletter-form-header-description p { font-family: YOURNAME !important; } // Newsletter Form Fields //.newsletter-form-field-element { font-family: YOURNAME !important; } // Newsletter Form Button //.newsletter-form-button { font-family: YOURNAME !important; } // Newsletter Form Footnote //.newsletter-form-footnote { font-family: YOURNAME !important; }

Ricordati di sostituire YOURNAME con il nome del tuo font.

Come modificare i caratteri dei post del blog

Una delle cose più popolari da fare con un font è usarlo per i post del blog.

È necessario considerare il titolo della pagina, le descrizioni e i titoli dei post nelle pagine degli articoli quando si esegue questa operazione.

Probabilmente vorrai che siano tutti uguali.

 // Blog Page Post Title //.blog-title { font-family: YOURNAME !important; } // Blog Page Post Descriptions //.blog-excerpt p { font-family: YOURNAME !important; } // Blog Page Read More Link //.blog-more-link { font-family: YOURNAME !important; } // Blog Post Entry Titles // .blog-item-title h1.entry-title { font-family: YOURNAME !important; }

Ricordati di sostituire YOURNAME con il nome del tuo font.

Come modificare i caratteri del blocco delle citazioni

L'ultimo esempio consiste nel modificare il Blocco citazioni con un carattere diverso.

Viene utilizzato per le citazioni nei post, ma anche per le testimonianze o le recensioni dei clienti.

 // Quote Text //.sqs-block-quote blockquote { font-family: YOURNAME !important; } // Quote Source //.sqs-block-quote .source { font-family: YOURNAME !important; }

Ricordati di sostituire YOURNAME con il nome del tuo font.

Potrebbe piacerti anche la mia guida alle dimensioni delle immagini di Squarespace.

Problemi con i caratteri personalizzati

L'aggiunta di caratteri è un lavoro facile una volta che hai una maniglia su un piccolo CSS. Ma ci sono alcuni errori comuni che vengono segnalati.

Messaggio "Caratteri non supportati" negli stili del sito

Occasionalmente, potresti visualizzare un messaggio di "carattere non supportato" sul tuo sito. Ciò accade quando viene utilizzato un font Adobe e quindi Adobe lo ritira.

Il più delle volte, Squarespace lo sostituirà con l'alternativa più vicina. In caso contrario, potresti dover caricare un altro font per sostituirlo.

Il mio carattere ha un aspetto diverso quando ho effettuato l'accesso

A volte le persone notano che i loro caratteri hanno un aspetto diverso quando si accede e durante la visualizzazione del sito live. Di solito, ciò è dovuto ai lettori di caratteri e al modo in cui visualizzano il sito.

Se noti questo, contatta l'assistenza Squarespace e possono guardare le impostazioni per vedere cosa deve essere regolato.

Non riesco a impostare il mio carattere su una dimensione specifica

I problemi con l'impostazione di una dimensione specifica per un carattere di solito hanno a che fare con il back-end del tuo sito web. Può essere dovuto alla versione di Squarespace che stai utilizzando.

Quindi, contatta il supporto per ottenere la loro assistenza su ciò che potrebbe essere sbagliato.

Aggiungi i tuoi caratteri personalizzati a Squarespace

Con un tocco di CSS, puoi aggiungere rapidamente file di font personalizzati a Squarespace.

Puoi usarli in luoghi diversi con un po' di codice e regolare tutto, dalle dimensioni alla spaziatura delle lettere.

L'editor di stile ha semplificato la personalizzazione del tuo sito Web oltre alle opzioni di carattere integrate.

Quindi, come potresti utilizzare caratteri personalizzati per rendere il tuo sito Web ancora più intelligente?