Come faccio a integrare i font su WordPress?

I caratteri sono la vetrina del suo tema. Se sono sufficientemente attraenti, possono rendere il suo sito web professionale e ottimizzare l’esperienza dell’utente

Se sono troppo “brutti”, però, il suo sito può apparire noioso e avere una scarsa esperienza utente

• Quindi, come si fa a trovare dei buoni font?
• Come li integra in WordPress?
• Come si fa a cambiare il loro colore e la loro dimensione su WordPress?

Se si è mai posto una di queste domande, allora si ponga e continui a leggere questa mini-guida.

Cominciamo!

Capitolo 1: Perché usare i font personalizzati e come aggiungerli a WordPress?

1.1. Perché utilizzare dei font personalizzati per il suo sito web?

Per impostazione predefinita, WordPress offre temi con font già incorporati. Anche se questi font sono ottimi e molto belli, integrarli da soli con il suo tocco personale può avere molti vantaggi per il sito

Eccone alcuni:

• Può personalizzare il tema a suo piacimento

Se non è veramente innamorato del tema di base del suo sito, ha la possibilità di personalizzare lei stesso i suoi font e di ottenere un tema che la soddisfi al meglio

• Si distingue dalla concorrenza

La personalizzazione dei font rende il suo design diverso da quello dei suoi concorrenti che si attengono ai font predefiniti di WordPress

Molti proprietari di siti WordPress si accontentano dei font e del design predefiniti offerti dal CMS

Questo di per sé non è una cosa negativa. Tuttavia, se vuole differenziare il suo sito da quello dei suoi potenziali concorrenti, la personalizzazione dei font del suo tema è la soluzione migliore.

• Il design del suo sito migliorerà

Se sceglie i font giusti, il design complessivo del suo sito sarà migliorato, il che rappresenta un grande passo avanti verso l’ottimizzazione dell’esperienza dell’utente

È chiaro che la maggior parte dei visitatori gradisce trascorrere del tempo su un sito ottimizzato e dall’aspetto accattivante. Questo non è il caso di un sito con font e un tema generale di cui si stancano.

Ora, come si fa a integrare questi font personalizzati in un sito WordPress? Questo è ciò che vedremo nella prossima sezione.

1.2 Come posso aggiungere dei font personalizzati a un sito WordPress?

Qui le mostrerò 3 metodi per personalizzare i font su WordPress. Può scegliere tra:

• Utilizzi i font web;
• Aggiungere i font manualmente
• Ospitare i font sul suo sito.

È importante notare che questi non sono gli unici metodi per personalizzare i suoi font. Ce ne sono altri, ma ho scelto di mostrarle quelli più popolari e di facile accesso

Vediamo come funziona ciascuna di queste opzioni

1.2.1. Font web

L’utilizzo di font web è il metodo più comune per aggiungere font a un sito web. Esiste un’ampia gamma che può utilizzare per personalizzare l’aspetto del suo sito

Per prima cosa, passiamo alla spiegazione del termine:

1.2.1.1. Che cos’è un font web?

I font web sono font ospitati da un fornitore esterno. Cioè, vengono memorizzati sul sito web del fornitore. Per accedervi, non è necessario scaricarli

Tutto ciò che deve fare è codificare un link al sito del fornitore per recuperare i font e utilizzarli direttamente sul suo sito. Può anche utilizzare un’estensione per risparmiarsi la fatica della codifica

Tuttavia, è molto importante non confondere font web con font sicuri per il web. I font sicuri per il web esistono come piano di riserva. Vengono visualizzati solo quando il visitatore del sito non può collegarsi al font che lei ha definito per il suo sito.

Ciò può essere dovuto al fatto che il server del provider non è raggiungibile o che il browser del visitatore è obsoleto e non supporta il font personalizzato

1.2.1.2. Perché usare un font web?

Il vantaggio di utilizzare i font web è che ha accesso a una moltitudine di font senza necessariamente ospitarli sul suo sito o in locale sul suo computer

Risparmierà molto più tempo creando alcune righe di codice o installando un’estensione, piuttosto che scaricare e poi caricare i file dei font

Inoltre, quando il fornitore in questione ha bisogno di aggiornare la sua gamma di font, avrà accesso immediato alle versioni aggiornate dei file di font da lei selezionati

Piuttosto flessibile, non è vero?

1.2.1.3. Dove trovare i font web?

I provider più popolari funzionano senza bisogno di un abbonamento. Tuttavia, i font possono essere a pagamento o gratuiti, a seconda del fornitore

I fornitori più popolari sono :

• Google Fonts

Google Fonts è il principale fornitore di font web. Offre un’ampia gamma di font web gratuiti

Può anche salvare i font sul suo computer e poi utilizzarli per i suoi documenti offline in modo completamente gratuito.

Per aggiungere font web al suo sito WordPress da Google Fonts, uno dei modi più semplici è quello di utilizzare la funzione Google Fonts facili da usare

Basta scaricare il plugin e inserire i font della ‘famiglia di font’ di Google Fonts nella scheda tipografia della dashboard ‘Aspetto’ e ‘Personalizzazione’ del suo WordPress.

Una volta fatto questo, clicchi su ‘Salva e pubblica’ per attivare le modifiche.

• Fonts.com

Se è alla ricerca di font di alto livello, Fonts.com è l’opzione migliore per lei. Questo fornitore a pagamento le fornisce font di alta qualità

• Adobe Typekit

Adobe Typekit richiede un po’ più di riserva rispetto a Google Fonts. È un mercato per i tipografi professionisti, ma c’è anche qualcosa per i dilettanti

Adobe Typekit offre anche un gran numero di font gratuiti per coloro che non vogliono investire e accedere alle opzioni premium. L’accesso a questa base di font richiede solo la registrazione.

Per utilizzare Adobe Typekit, vada nella barra di ricerca dell’interfaccia principale e cerchi “kit”

Nella schermata successiva, selezioni l’opzione “Crea un nuovo kit”. Le verrà chiesto di inserire il nome del dominio del suo sito come biglietto per la fase successiva

Le verrà quindi fornito un javascript che dovrebbe salvare in una piccola nota di testo sul suo computer.

Il suo kit è pronto. Da quel momento in poi, potrà sfogliare la collezione Adobe Typekit e aggiungere i font che desidera al suo kit. La parte successiva è la codifica sull’interfaccia del suo sito WordPress

Ricorda lo snippet javascript che le ho chiesto di salvare?

Ora è il momento di incollarlo nel file header.php del suo tema, nelle schede Aspetto e Editor

Poi clicchi su “Aggiorna file” e il gioco è fatto. Potrà aggiungere altri font Adobe Typekit modificando il suo foglio di stile.

Come già detto, ci sono molti fornitori di font, abbiamo solo visto quelli più popolari

Con tutti questi fornitori, può integrare direttamente i font nelle sue pubblicazioni, creando righe di codice o utilizzando un’estensione da installare sul suo sito WordPress

Inoltre, è bene ricordare che fornitori come Google fonts le offrono la possibilità di vedere in anteprima il risultato che otterrà dopo aver optato per un determinato font.

1.2.2. Aggiungere i font manualmente

La seconda opzione che suggerisco per personalizzare i font sul suo sito WordPress è di aggiungerli manualmente al suo sito

Questi possono essere font web o font che ospita localmente sul suo computer.

Per aggiungere manualmente i web font al suo sito, dovrà creare delle linee di codice per il suo sito foglio funzioni e il suo foglio di stile

Se utilizza un tema personalizzato, la modifica del foglio di funzione e del foglio di stile non le causerà alcun problema

Tuttavia, se sta utilizzando un tema WordPress, dovrà necessariamente ricreare il suo tema

Diamo quindi un’occhiata ai passaggi per aggiungere manualmente i font web:

• Selezionare un font

Per prima cosa, deve selezionare un font di sua scelta e recuperare il suo link.

• Incorpora il link del font scelto

Il secondo passo consiste nell’integrare il link copiato nel foglio funzioni del suo tema. Per fare questo, deve sostituire il link del font esistente nel file di funzione con quello generato dal fornitore e copiato inizialmente

Ora ha messo in coda il suo font. Non funzionerà immediatamente. Deve passare alla fase successiva.

• Aggiungere il font al foglio di stile

Affinché il font funzioni sul suo sito, deve aggiungerlo al foglio di stile del suo sito

Per fare questo, aggiunga il codice per applicare i font al suo sito web file style.css e selezioni l’elemento che desidera stilizzare (il corpo del testo o le testate).

Infine, salvi il foglio di stile modificato e verifichi che le sue modifiche funzionino sul sito

Se tutto questo sembra complesso, ecco un video

Tuttavia, è anche una buona idea aggiungere una font di emergenza o font sicuro per il web nel caso in cui uno dei visitatori del suo sito non sia in grado di accedere al font che ha applicato

Da qui l’importanza di avere un sito ottimizzato, ben progettato e mobile-friendly. Di seguito le mostrerò come scaricare e convertire i file di font.

1.2.3. Ospitare i font sul suo blog

Un altro modo è quello di ospitare i font sul server del suo sito. Uno dei vantaggi di questo metodo è che lei ha il monopolio sulla sicurezza del suo sito nessun link a terzi.

I font da ospitare sono font web disponibili per il download dai siti dei fornitori. Dovrebbe comunque verificare se la licenza del sito del provider le consente di farlo

Può anche ospitare i font a livello locale, caricarli sul suo sito e inserirli nel suo foglio di stile senza accodarli al suo file di funzione.

In termini concreti, questo significa

• Per prima cosa, scarichi i font di sua scelta da un sito fornitore. Per poter utilizzare questi file di font sul suo sito web, si assicuri che si trovino nella cartella formato woff. Se necessario, può utilizzare un convertitore di formato per renderli utilizzabili. Torneremo su questo punto in modo più dettagliato nel prossimo capitolo
• Successivamente, dovrà caricare tutti i file di font scaricati nella cartella del suo tema. Sarebbe comunque più sensato e tattico creare una sottocartella denominata ”fonts” nella cartella del tema, dove si troveranno tutti i file dei font. Questo è un ulteriore punto nella personalizzazione e nell’ottimizzazione del suo sito WordPress
• Infine, dovrà solo integrare i font nel suo foglio di stile seguendo lo stesso processo e osservare il suo sito cambiare subliminalmente il suo aspetto.

Ora che abbiamo esplorato queste varie opzioni per personalizzare i suoi font, condividerò con lei come convertire i suoi file di font

Per incorporare manualmente i font sul suo sito WordPress, deve prima scaricarli e caricarli sul suo sito. Deve anche assicurarsi che questi file siano nel formato giusto

Per fare questo:

• Cominci a visitare il sito del fornitore che ha scelto
• Poi selezioni il font che fa al caso suo
• Vada alla sezione “Licenza e utilizzo” del sito per scoprire se le è consentito scaricare e utilizzare il file del font
• Clicchi sulla scheda “download” e salvi il file zip localmente sul suo computer;

• Quindi apra il file zip sul suo computer per estrarre i font. Generalmente, li troverà nei formati WOFF e WOFF 2.0

Ora che sa come integrare i font in WordPress, vediamo come può modificarli lei stesso in qualsiasi momento.

Capitolo 2: Come faccio a modificare i miei font su WordPress?

2.1. Modifica dei font su WordPress

Ha la possibilità di modificare i suoi font e ci sono diversi modi per farlo:

• Utilizzi l’editor di blocchi o l’editor classico;
• Utilizzi lo strumento di personalizzazione di WordPress;
• Apportare modifiche ai post;
• Apportare modifiche al suo foglio di stile.

2.1.1. L’editor di blocchi di Gutenberg

Con l’editor di blocchi di Gutenberg, può cambiare lo stile del testo nel suo post o nella sua pagina. Per farlo, selezioni la parte che desidera modificare

Fonte kinsta.com

Apparirà un piccolo menu, clicchi sulle icone che appaiono per modificare il suo testo. Può fare in modo che il testo in grassettoin corsivo, in in corsivo, il sottolineatoecc.

2.1.2. L’editore classico

L’editor classico è presente nelle versioni precedenti di WordPress e comprende una barra degli strumenti dove può modificare facilmente i suoi testi.

Fonte kinsta.com

2.1.3. Lo strumento di personalizzazione di WordPress

Nello strumento di personalizzazione, può modificare il testo aggiungendo un CSS manuale. Per farlo, si rechi nella scheda di personalizzazione e clicchi su “Aggiungi CSS aggiuntivi”

Quindi compili la finestra di dialogo con il CSS che desidera aggiungere.

2.1.4. Apportare modifiche al foglio di stile

Per questo scenario, se sta utilizzando un tema WordPress predefinito, dovrà creare un tema figlio

In questo tema figlio, dovrà impostare un nuovo foglio di stile in cui integrerà il suo nuovo stile di carattere.

Se utilizza un tema personalizzato, apra la cartella del suo tema wp-content/temi e cambiare il CSS nella sezione stile.css.

2.2. come cambiare i colori dei caratteri su WordPress?

Può anche cambiare il colore di alcuni testi del suo sito, utilizzando gli stessi metodi utilizzati per cambiare lo stile dei caratteri.

2.2.1. Editore Gutenberg

L’editor di blocchi di Gutenberg le permette di cambiare non solo il colore del testo, ma anche il suo sfondo. Per farlo, deve

• Apra la cornice;
• Vada alla scheda “Impostazioni colore”
• Quindi selezioni le palette di colori che preferisce per cambiare il colore dei blocchi di testo e del loro sfondo.

2.2.2. L’editor classico di WordPress

L’Editor classico nelle versioni precedenti di WordPress le dà anche la possibilità di cambiare solo il colore del testo che ha selezionato

2.2.3. Personalizzazione del tema

Alcuni temi le permettono di cambiare i colori del suo sito. Ma deve prima aggiungere il CSS allo strumento di personalizzazione per poter cambiare i colori

Clicchi sulla scheda “Aggiungi CSS aggiuntivo” nella sezione di personalizzazione e inserisca il suo CSS nella casella di testo.

Fonte kinsta.com

2.2.4. Il foglio di stile

Il foglio di stile le permette anche di cambiare i colori dei caratteri. Ma per utilizzarlo, si assicuri di creare un tema figlio e un nuovo foglio di stile se il suo tema è un tema predefinito.

Per quanto riguarda la dimensione dei caratteri, può anche cambiarla con questi diversi metodi. Faccia attenzione, però, perché se i suoi paragrafi differiscono troppo nelle dimensioni, appariranno incoerenti e difficili da leggere

Per i colori, se la combinazione rende difficile l’accesso, riceverà un avviso da WordPress. Tenga inoltre presente che se i colori sono eccessivi, il suo sito non avrà un aspetto veramente professionale, cosa che sicuramente deluderà i suoi visitatori.

A proposito di “piacere ai suoi visitatori”, nel prossimo capitolo le mostrerò come scegliere i font giusti da includere nel suo sito WordPress.

Capitolo 3. Le migliori pratiche per trovare buoni font

È bene personalizzare i font. Ma è ancora meglio scegliere e applicare i font giusti

Come ho detto prima, i font sono la vetrina del suo tema. Riflettono in un modo o nell’altro l’immagine del suo sito web.

3.1. Cose da considerare nella scelta dei font

La prima cosa da fare è scegliere in base all’immagine che vuole dare al suo sito o al suo marchio. Dovrebbe anche concentrarsi su :

• Leggibilità se il carattere è poco visibile o illeggibile, l’interfaccia del suo sito sarà sgradevole e i visitatori si stancheranno di leggervi a causa della scelta sbagliata del carattere.
• Dimensione del carattere scelga un font di buone dimensioni per rendere il suo blog più piacevole da leggere.
• Interlinea e spaziatura tra i caratteri spaziatura: è risaputo che il flusso di Internet è ormai di proprietà degli smartphone. Immagini di leggere un post di un blog con caratteri difficili da distinguere sul suo smartphone

È anche importante ottenere il giusto mix di caratteri. Può scegliere i font della stessa famiglia o scegliere quelli che la interessano

Quindi, sappia come fare la giusta combinazione per non appesantire il suo tema o perdere la sua personalizzazione. Esistono anche diversi strumenti online, come Fontjoy o Fontpair per aiutarla a creare la combinazione perfetta.

3.2. Consigli per la scelta

Non è facile fare la scelta giusta che piacerà a lei, ai suoi visitatori e renderà il suo WordPress bellissimo” come direbbero gli inglesi

Per aiutarla, ecco alcuni consigli che dovrebbero guidarla verso una buona scelta di font:

• Cerchi dei font nei suoi documenti stampati che siano abbastanza interessanti da poter essere utilizzati come font per il web
• Scelga i font più popolari dalle banche di font. Sono utilizzati da un gran numero di persone, quindi sono familiari agli utenti di Internet.
• Visiti i siti dei suoi concorrenti e veda cosa offrono, in modo da poter rispondere meglio.

Si prenda la briga di sperimentare le sue scelte prima di applicarle al suo sito. Inoltre, eviti di accodare variazioni di font che non utilizza o di ospitare sul suo sito font che non usa

Si assicuri anche che i font che utilizza siano accodati correttamente.

Capitolo 4: Altre domande sui font di WordPress

4.1. Come posso incorporare un font personalizzato su WordPress?

Ci sono diverse opzioni per farlo:

• Codifichi i font web nel suo tema e li utilizzi;
• Installi un’estensione sul suo sito che le permetta di utilizzare i font web;
• Aggiungere manualmente da una fonte locale i font precedentemente scaricati;
• Ospitare i font sul suo sito WordPress.

4.2) Come faccio a caricare il font tramite il file manager di WordPress?

Per scaricare il suo font utilizzando il file manager, segua questi passaggi:

1. Vada al suo sito web cPanel;
2. Vada al File Manager;
3. Vada a wp-content/themes/il suo tema/fonts (o crei una cartella di font se non esiste);
4. Scarichi il file zip del font personalizzato;
5. Decomprima il font nella cartella ;
6. Prenda nota del percorso del file, perché dovrà farvi riferimento nel suo CSS.

4.3. Come si aggiunge il font personalizzato al tema?

Ciò richiede che lo faccia riferimento nel suo documento styles.css e che specifichi dove desidera che si applichi.

Se non l’ha ancora fatto, si assicuri di utilizzare un tema figlio, in modo che il CSS personalizzato non vada perso durante gli aggiornamenti del tema. Ne abbiamo parlato nel Capitolo 2.

Può aggiungere un CSS personalizzato al suo sito web per fare riferimento al nuovo font. Per farlo, ha due opzioni:

• Utilizzi l’editor di WordPress;
• Utilizzi il file manager.

4.4. Quali font si possono utilizzare sul web?

Tecnicamente parlando, può aggiungere praticamente qualsiasi font a qualsiasi sito web.

Tuttavia, quando cerca un font online, deve sempre tenere in considerazione il prezzo, la qualità e l’affidabilità contratto di licenza e il metodo di installazione.

Senza ulteriori indugi, ecco alcune delle librerie di font più popolari che possono aiutarla a trovare il font perfetto

• Google Fonts (GRATIS) ;
• Font Adobe (Premium) Adobe Fonts (ex Typekit) ;
• Font Squirrel.

4.5. Quali sono i diversi formati di font esistenti?

È il momento di conoscere i diversi tipi di font che esistono. È importante ricordare che ogni tipo di font ha un’estensione diversa e una diversa compatibilità con una serie di browser.

• Font TrueType (TTF) ;
• Font OpenType (OTF) ;
• Web Open Font Format (WOFF);
• Web Open Font Format 2.0 (WOFF2) ;
• Font OpenType incorporato (EOT).

4.6. Come vengono supportati i formati dei font dai browser?

Negli ultimi anni, i browser moderni sono migliorati notevolmente nel modo in cui supportano i font personalizzati. Ma ancora oggi, non tutti i formati sono supportati da tutti i browser.

Ecco i browser più diffusi e il formato di font che attualmente supportano:

• Font TrueType (TTF): compatibile con Internet Explorer versione 9.0 e successive, Chrome dalla 4.0, Firefox dalla 3.5, Safari dalla 3.1 e Opera dalla 10.0 ;
• Font OpenType (OTF): Ha la stessa compatibilità con i browser del font TrueType;
• Web Open Font Format (WOFF): funziona con Internet Explorer versione 9.0 e successive, Chrome 5.0+, Firefox 3.6+, Safari 5.1+ e Opera 11.1 e successive;
• Web Open Font Format 2.0 (WOFF2): Funziona con Google Chrome dalla versione 36.0, Firefox dalla 35.0 e Opera dalla 26.0 ;
• Font OpenType incorporato (EOT): funziona solo con Internet Explorer versione 6+.

Fonte w3schools

4.7. Come scegliere il formato di carattere giusto?

Font Web Open Format (WOFF) è diventato il tipo di font standard del settore, in quanto contiene metadati aggiuntivi e utilizza meno larghezza di banda per il rendering.

Tuttavia, spesso è difficile trovare versioni WOFF di tutti i font, ed è un tipo di font utilizzato nei browser moderni.

I font TTF e OTF sono più facili da trovare e possono essere disponibili se non riesce a trovare una versione WOFF del font scelto.

In breve, l’utilizzo di TTF/OTF e WOFF garantirà che i suoi font siano supportati da tutti i browser.

Per maggiori dettagli sui formati di font supportati, provi Posso usareun ottimo strumento per verificare la compatibilità delle funzioni tra diverse versioni di browser (GRATIS).

In sintesi

La personalizzazione dei caratteri è una risorsa importante se vuole distinguere il suo sito WordPress dagli altri

Anche se non è un esercizio facile, aiuta ad abbellire il tema o il design del suo sito e ad ottimizzare l’esperienza dell’utente

La scelta dei caratteri è importante quanto il loro formato. Si assicuri quindi di selezionare i font giusti per il suo branding e di modificarli a suo piacimento

Considera anche font sicuri per il web per quando i visitatori non possono vedere i font che lei ha incluso per un motivo o per l’altro

Tuttavia, non esageri con i cambiamenti. Questo potrebbe rendere il suo sito di difficile accesso e i suoi testi stanchi e difficili da leggere.

Quindi ora sa come integrare e modificare i font sul suo sito WordPress, come modificare i colori del testo e anche come scegliere i font giusti per far apparire il suo sito attraente e professionale.

Grazie e a presto!