Come aggiungere caratteri personalizzati a WordPress in modo semplice

Pubblicato: 2015-05-22

L'aggiunta di più caratteri al tuo computer è piuttosto semplice. Basta scaricare i file nella directory dei caratteri e quindi iniziare a utilizzarli nel software e nelle applicazioni che preferisci.

Tuttavia, se desideri utilizzare caratteri personalizzati sul tuo sito Web, in particolare quei caratteri tipografici che i tuoi visitatori potrebbero non aver installato sui loro dispositivi, diventa un po' più complicato.

Per fortuna, come utente di WordPress, ci sono alcuni ottimi strumenti gratuiti che puoi utilizzare per aggiungere singoli caratteri o un'intera libreria al tuo sito web. Dopo aver reso disponibili i caratteri per il tuo tema, puoi iniziare ad applicarli ai vari stili in uso sul tuo sito web.

In questo articolo ti mostreremo dove puoi trovare font gratuiti e premium di alta qualità, come aggiungerli al tuo sito Web WordPress, oltre ad alcuni strumenti per aiutarti a scegliere le giuste impostazioni per ogni carattere tipografico sul tuo sito web.

Caratteri personalizzati per WordPress

Dove trovare i caratteri per il tuo sito web

Prima di arrivare alle istruzioni su come aggiungere caratteri personalizzati al tuo sito Web WordPress, diamo un'occhiata ad alcuni dei luoghi in cui puoi trovare nuovi caratteri tipografici per modificare l'aspetto del testo sul tuo sito.

Google Font

Sono disponibili alcune ottime risorse online gratuite, dove puoi trovare font open source che possono essere utilizzati liberamente in tutto il tuo sito web. Alcune risorse che potresti voler esplorare includono:

  • Google Fonts: sfoglia oltre 600 font open source ottimizzati per il web. L'uso di questi caratteri sul tuo sito Web WordPress è molto semplice, come tratteremo a breve.
  • Font Squirrel: un altro grande repository di font gratuiti.
  • Edge Web Fonts: una raccolta di font Web gratuiti basati su Adobe Typekit.
  • Typekit: una raccolta professionale di oltre 4.000 font gratuiti e premium di Adobe, da utilizzare sul Web e sulla stampa.

Come puoi vedere, ci sono molte fonti online legittime di font gratuiti e premium che puoi utilizzare per personalizzare l'aspetto del tuo sito Web WordPress.

Strumenti tipografici per web designer

Scegliere il giusto set di caratteri per il tuo sito web può essere difficile. C'è di più nel processo che scegliere uno o due caratteri che ti piacciono e quindi aggiungerli al tuo sito web.

Non solo devi prendere in considerazione l'aspetto del carattere, ma anche la dimensione che sceglierai, quanto è ampia l'area del contenuto sul tuo sito e qual è l'altezza della linea ottimale per ciascun carattere tipografico.

Per fortuna, ci sono alcuni strumenti online gratuiti che puoi utilizzare per aiutarti ad applicare correttamente i caratteri scelti. Questo assicura che il tuo contenuto appaia al meglio .

Una risorsa online a cui dovresti assolutamente dare un'occhiata quando personalizzi i caratteri sul tuo sito Web è il Calcolatore tipografico del rapporto aureo. Questo strumento tipografico, dal tizio dietro il Thesis Framework, ti ​​consente di inserire una dimensione del carattere, seguita dalla larghezza dell'area del contenuto. Lo strumento calcolerà quindi le impostazioni tipografiche perfette per la configurazione specifica del tuo sito web.

Type Scale è un altro strumento online che semplifica la determinazione delle dimensioni dei diversi stili di testo sul tuo sito Web in relazione l'uno con l'altro. Dopo aver inserito la dimensione del carattere di base, come la dimensione del testo del paragrafo sul tuo sito, scoprirai quindi a quale dimensione dovrebbe essere impostata ciascuna delle diverse intestazioni .

Digitare Scala

Ci sono un certo numero di scale tra cui scegliere, inclusa la sezione aurea sopra. Una volta che sei soddisfatto delle impostazioni, puoi copiare rapidamente il CSS per utilizzarlo sul tuo sito web.

Plugin per font personalizzati di WordPress

Proprio come ci sono molti posti in cui trovare i caratteri online, ci sono anche molti modi per integrarli nel tuo sito Web WordPress. Tuttavia, per aiutarti a iniziare il più rapidamente possibile , ecco alcuni dei migliori plugin relativi ai font di WordPress:

Font Google facili

Plugin facile di Google Fonts

Easy Google Fonts è un plug-in gratuito che ti dà la possibilità di utilizzare uno qualsiasi degli oltre 600 caratteri gratuiti dal repository di Google sul tuo sito Web WordPress. Il plugin funziona con lo strumento di personalizzazione di WordPress. Ciò ti consente di visualizzare in anteprima le modifiche prima di prendere una decisione finale su quali caratteri utilizzare e in quale posizione del tuo sito.

Dopo aver installato e attivato il plug-in sul tuo sito Web, puoi iniziare a modificare i caratteri utilizzati dal tuo attuale tema WordPress. Per fare ciò, vai allo strumento di personalizzazione di WordPress e fai clic sulla sezione Tipografia.

Facile personalizzazione dei caratteri di Google

Immediato, il plug-in ti consente di modificare le impostazioni tipografiche per gli stili principali utilizzati dal tuo tema. Ciò potrebbe includere il paragrafo ei singoli titoli. Tuttavia, tramite la pagina delle impostazioni di Easy Google Fonts, puoi creare controlli dei caratteri personalizzati . Questi vengono quindi aggiunti all'interfaccia di personalizzazione, offrendoti un modo semplice per cambiare il carattere utilizzato da elementi come elenchi, virgolette e altro.

Semplici controlli dei caratteri personalizzati di Google Fonts

Dopo aver aggiunto un controllo del carattere personalizzato, puoi accedervi dalle impostazioni della Tipografia del tema in Customizer.

Tipografia a tema di Google Fonts facile

Utilizzando questa funzione del plug-in, puoi quindi modificare i caratteri utilizzati da qualsiasi elemento o stile del tuo tema WordPress. I controlli aggiunti alla personalizzazione coprono anche lo spessore del carattere, la decorazione del testo e le proprietà di trasformazione, nonché il colore del carattere, il colore dello sfondo, la dimensione, l'altezza della riga e la spaziatura delle lettere.

Colori dei caratteri Google facili

Combinando i controlli dei caratteri personalizzati con le impostazioni dettagliate offerte, il plug-in Easy Google Fonts apre un intero mondo di possibilità quando si tratta di modificare l'aspetto del testo sul tuo sito Web WordPress, il tutto senza la necessità di modificare direttamente alcun codice.

Usa qualsiasi carattere

Usa qualsiasi plug-in di font

Il plug-in Easy Google Fonts sopra è altamente raccomandato. Tuttavia, ha uno svantaggio: puoi utilizzare solo i caratteri tipografici dalla raccolta di Google Fonts. Se nessuno di questi 686 caratteri piace, o se desideri utilizzare un carattere tipografico personalizzato , il plug-in Use Any Font, ugualmente gratuito, è una buona alternativa.

Dopo aver installato e attivato il plugin, puoi caricare uno o più font sul tuo sito web, direttamente dal tuo computer. Tuttavia, prima di iniziare, devi iscriverti alla chiave API gratuita (o fare una donazione), che collegherà il plug-in allo strumento di conversione dei caratteri.

Usa qualsiasi caricamento dei caratteri

Dopo aver caricato almeno un font, puoi assegnarlo agli elementi specifici del tuo sito web. Ciò include l'elenco degli elementi predefiniti, nonché tutti gli elementi personalizzati definiti dall'utente.

Usa qualsiasi carattere assegnato

Il plug-in aggiunge anche alcuni controlli dei caratteri all'editor dei post di WordPress . Ciò semplifica la modifica dei caratteri utilizzati nei tuoi post e nelle tue pagine, su base individuale, piuttosto che a livello globale.

Usa qualsiasi editor di caratteri

Dopo aver assegnato un carattere, puoi visualizzare le modifiche alla tua tipografia visitando il front-end del tuo sito web. Sebbene i controlli di questo plug-in non siano paragonabili a quelli offerti dal plug-in Easy Google Fonts, se desideri semplicemente cambiare i caratteri utilizzati dagli elementi specifici del tuo tema in un carattere personalizzato a tua scelta, usa qualsiasi carattere lo fa bene il lavoro.

Font Typekit per WordPress

Typekit per WordPress

Se desideri utilizzare i caratteri gratuiti e premium del servizio Adobe Typekit sul tuo sito Web WordPress, il plug-in Typekit Fonts for WordPress gratuito fa per te.

Con questo plugin, puoi utilizzare i selettori predefiniti o aggiungere le tue regole CSS personalizzate . Ciò garantisce che qualunque parte del tuo sito web desideri personalizzare con un font Typekit, sei libero di farlo con questo plugin.

Aggiunta manuale di caratteri personalizzati a WordPress

Se per qualsiasi motivo l'idea di utilizzare uno dei plug-in gratuiti di cui sopra non ti piace, puoi sempre cambiare manualmente i caratteri utilizzati sul tuo sito Web WordPress. Se il carattere che desideri utilizzare può essere trovato nel repository di Google Fonts, aggiungerlo al tuo sito Web è molto semplice.

Aggiungi carattere Google

Tutto quello che devi fare è selezionare il font sul sito Web di Google, quindi copiare il codice pertinente nella sezione head e il foglio di stile CSS del tuo sito Web.

Aggiungi Google Font CSS

Tuttavia, se il tuo font preferito non è ospitato in un repository come Google Fonts, a cui puoi semplicemente collegarti ad esso, dovrai ospitare tu stesso il font. Questo cambia leggermente il processo e aggiunge alcuni passaggi extra, come il caricamento del carattere sul tuo server.

Gestore di file

Puoi caricare il file del carattere utilizzando il software FTP o lo strumento di gestione dei file nel pannello di controllo del tuo host web. È una buona idea caricare il carattere in una directory dei caratteri dedicata , preferibilmente nella cartella del tema figlio per mantenere le cose organizzate.

FTP

Una volta che il file del carattere è sul tuo server, apri il file del foglio di stile CSS del tuo tema per la modifica. Questo può essere fatto dalla dashboard di amministrazione di WordPress, nella schermata Aspetto > Editor.

CSS personalizzato

Dopo aver aggiunto il CSS sopra al foglio di stile per caricare il font, puoi usarlo ovunque in quel file CSS per modificare l'aspetto del testo come di seguito:

Aggiungi Google Font CSS

Per motivi di prestazioni, ove possibile, dovresti provare a collegarti a un repository di font esterno come Google Fonts. Tuttavia, se non riesci a trovare il carattere che desideri utilizzare online, potresti dover sacrificare parte della velocità della tua pagina ospitando tu stesso il file.

Conclusione

Spero che ora tu sappia dove trovare i caratteri personalizzati e come iniziare ad aggiungerli al tuo sito WordPress. Utilizzando uno dei plug-in gratuiti, come Easy Google Fonts, puoi iniziare a modificare non solo i caratteri utilizzati sul tuo sito Web, ma anche il modo in cui tali caratteri sono presentati .

Grazie allo strumento di personalizzazione di WordPress, ora puoi apportare facilmente modifiche all'aspetto del testo sul tuo sito web. Tutto questo avviene attraverso una serie di menu visivi, completi di un'anteprima dal vivo.

Se il tuo tema attuale non ti dà molto controllo su quali caratteri vengono utilizzati sul tuo sito, utilizzando uno dei metodi sopra indicati, ora hai un modo semplice per apportare tali modifiche, senza modificare tu stesso nessuno dei CSS sottostanti.

Quali sono i tuoi caratteri preferiti? Quali impostazioni tipografiche sul tuo sito web vuoi modificare? Se hai domande su font, tipografia o WordPress in generale, condividile nei commenti qui sotto.