Come aggiungere caratteri personalizzati a un sito Web WordPress

Ti piacerebbe imparare come aggiungere caratteri personalizzati a un sito Web WordPress?

Perché rendere noioso il tuo blog usando i caratteri standard? Lascia che il tuo blog parli della tua personalità vibrante e degli argomenti che tratti con un'ampia varietà di caratteri personalizzati. I caratteri personalizzati sono una caratteristica interessante che rende il tuo blog preferibile agli altri.

Affrontiamolo; tutti amiamo blog e siti Web con i caratteri giusti. Non solo decorano il sito Web, ma aiutano anche ad attirare l'utente verso i tuoi contenuti. Tuttavia, la scelta dei font standard di WordPress è limitata e dipende dal tema che stai utilizzando. La buona notizia è che puoi aggiungerli manualmente o con plugin di WordPress specializzato.

E qui sorgono due domande: dove ottenere caratteri personalizzati per WordPress e come installare caratteri personalizzati sul tuo sito web.

Andiamo a scoprirlo.

Perché dovrei usare caratteri personalizzati?

Sono finiti i giorni in cui Times New Roman e Georgia erano considerati gli unici caratteri tipografici per il testo sui siti web. Negli ultimi anni, lo spazio dei caratteri è completamente cambiato con l'avvento di caratteri come Google Fonts e altri.

Oggi ci sono centinaia di font gratuiti, informazioni e ausili di formazione e risorse di progettazione disponibili su Internet. A differenza di Adobe Illustrator, Photoshop e altre app classiche, WordPress non ti dà il pieno controllo sui caratteri predefiniti. Solo alcuni temi WordPress scelgono di supportare e utilizzare caratteri personalizzati.

Pertanto, in questo articolo imparerai come trovare i caratteri personalizzati adatti e usarli sul tuo sito Web WordPress.

L'importanza di utilizzare caratteri personalizzati

Perché cambiare i caratteri, il rientro delle parole, l'interlinea, l'interlinea delle lettere o la saturazione dei caratteri, chiedi? Tuttavia, alcuni studi lo dimostrano la tipografia migliora la comprensione della lettura.

Molto dipende dalla costruzione dei caratteri. A livello conscio e inconscio, tutti valutano il contenuto di una pagina web in base alla progettazione.

Il design dei caratteri influisce sui lettori, anche se non ci prestano attenzione. Rinunciare al design dei caratteri significa rinunciare allo sviluppo stesso! L'umore del lettore dipende da questo. Il carattere facilita la lettura o costringe gli utenti a lasciare la pagina.

Tutti i browser Web includono una serie di caratteri predefiniti. Ciò significa che se il font non è specificato nel CSS della pagina, verrà utilizzata la versione standard. Puoi ancora utilizzare i caratteri predefiniti, ma rendono più difficile per gli utenti. Per questo è fondamentale utilizzare un font personalizzato. Se il tuo tema WordPress non ti offre opzioni per cambiare il carattere, ci sono molti siti Web e strumenti che possono aiutarti.

Alternative a Google Fonts

Molti di voi conoscono il Caratteri di Google. Ci sono molti altri siti Web in cui puoi trovare bellissimi caratteri. Alcuni di essi sono gratuiti per uso personale. Se hai bisogno di un uso commerciale, avrai bisogno di una licenza. Google Fonts e Adobe Edge Fonts sono gratuiti. Questo è il motivo per cui non sono così unici.

Ecco alcuni altre risorse per trovare i caratteri per uso gratuito e commerciale:

1. TemplateMonster — Sul sito Web TemplateMonster troverai tutto ciò di cui hai bisogno per il web design. Ci sono anche molti font e pacchetti di font per uso personale a un piccolo prezzo. Inoltre, per aiutarti a scegliere, tutti i caratteri presentati su opuscoli o cornici. Ogni carattere è inoltre presentato con una licenza commerciale.
2. MyFonts — MyFonts offre attualmente la più ampia selezione di caratteri al mondo. Tuttavia, i prezzi qui sono anche nel segmento superiore. Quindi, se hai un budget limitato, questo potrebbe non essere adatto a te.
3. FontPrimavera — Fontspring vende font di novità per uso commerciale. Ma in quasi tutte le famiglie, 1-2 font gratuiti possono essere utilizzati per scopi personali. Inoltre, c'è una sezione separata con caratteri gratuiti. La collezione è vivace. Ma dovrai studiare attentamente le informazioni sulla licenza per un particolare font prima del download.
4. caratteri cufon — È anche una vasta collezione di diversi tipi di carattere. Selezionane uno qualsiasi e vedrai una pagina con informazioni dettagliate a riguardo. Ci sono molti font gratuiti e sono divisi in singole sezioni. Il sistema di smistamento su CufonFonts è abbastanza flessibile e conveniente. Inoltre, è incluso il supporto Webfont.
5. Dafont — Un'altra raccolta accessibile di 3 caratteri gratuiti. La maggior parte di essi sono progettati esclusivamente per uso personale. Una caratteristica interessante di DaFont è un sistema di categorie. Puoi selezionare i caratteri nello stile di fumetti, videogiochi, vintage ecc….

La scelta dei caratteri è molto allettante perché sono tutti belli. Ma non dovresti scegliere molto. Non utilizzare più di due caratteri su un sito ragnatela. Poi ilaspetto del tuo sito web sarà coerente. Una volta scelti i caratteri, assicurati di caricare i file per ogni stile che utilizzerai (normale, grassetto, corsivo, ecc.).

Ora che hai selezionato il font appropriato per il tuo sito web, scopriamo come aggiungerlo.

Come aggiungere caratteri personalizzati a WordPress

Esistono diversi modi per aggiungere caratteri a un sito Web WordPress:

1. plugin : in questo caso diverso plugin di WordPress servono per facilitare il processo.
2. manualmente : utilizzando questo metodo è necessario scaricare un font scaricato dal sito e modificare il file CSS.
3. temi: molti temi popolari hanno opzioni integrate per personalizzare i tuoi caratteri (nota: non tratteremo questa opzione poiché il processo varierà a seconda del tema che stai utilizzando.

Opzione 1: cambia i caratteri di WordPress con i plugin

Se non ci interessano i cambiamenti globali, possiamo installare plugin di WordPress che cambierà i caratteri sul tuo sito web.

Caratteristiche dei plugin di caratteri personalizzati

Il software open source ha un vantaggio per l'interesse della comunità e anche WordPress ha questo vantaggio. Diversi plugin di WordPress ti consentono di aggiungere caratteri personalizzati. Come scegliere un plugin appropriato quando ce ne sono così tanti? Quali sono le caratteristiche dei plugin di WordPress con font personalizzati?

Ecco alcuni punti da considerare:

• Possibilità di utilizzare un carattere personalizzato
• Possibilità di utilizzare più font
• Intestazioni e componenti di destinazione
• Bonus: la possibilità di modificare le impostazioni dei caratteri dall'editor visivo

È tutto. La prima caratteristica dell'elenco è molto importante. Puoi comunque scaricare font da siti Web come DaFont, Font Squirrel, ecc., ma devi essere in grado di caricarli su WordPress.

Diamo un'occhiata ad alcuni plugin per WordPress che ti permettono di caricare font personalizzati.

1. Font migliore

Questo plugin per WordPress consentirà ai suoi utenti di combinare automaticamente l'ultima versione dei font Better Font Awesome con il CSS, codici brevi e altro ancora. Inoltre, questo plugin per WordPress viene aggiornato automaticamente.

Troverai come funzionalità: aggiornamenti regolari, un generatore di shortcode, compatibilità con altri plugin di WordPress, ecc ...

Download | Demo | Web hosting

2. Google Fonts per WordPress

Questo plugin WordPress è composto da caratteri speciali 877, che ti permetteranno di usare tutti i caratteri sui tuoi siti Web WordPress. Grazie alla sua anteprima in tempo reale, ti permetterà di vedere come sarà il tuo sito web una volta applicato il font. 

Inoltre, sarai in grado di salvarlo e modificarlo sul frontend quando trovi la combinazione che ti piacerà.

Le sue caratteristiche includono: un'anteprima in tempo reale, a SEO abbastanza avanzato, supporto multilingue, supporto per più 870 + Google Fonts, aggiornamenti facili e altro ancora.

Download | Demo | Web hosting

3. Plugin Font

Fonts Plugin è un plugin gratuito per WordPress che consente agli utenti di accedere alle librerie di Google Fonts e Adobe Fonts. Con questo plug-in per WordPress, puoi scegliere tra oltre 1000 caratteri Google e Adobe, utilizzare più caratteri sul tuo sito Web e testare diverse opzioni con la funzione di anteprima in tempo reale del plug-in nel personalizzatore di WordPress.

Per ulteriori modi per personalizzare la tipografia del tuo sito Web come la dimensione del carattere, la spaziatura delle lettere e l'altezza della riga, puoi eseguire l'aggiornamento alla versione premium, Font Plugin Pro.Download | Demo | Web hosting

4. Facile Google Fonts

Easy Google Fonts è uno di migliori plugin di WordPress per personalizzare la tipografia del tuo sito web. Come Fonts Plugin, ti consente di scegliere tra centinaia di Google Fonts e visualizzarli in anteprima nel Customizer prima di aggiungerli al tuo sito web.

Sebbene fornisca l'accesso a un numero minore di Google Fonts, è unico in quanto consente di creare controlli e regole dei caratteri personalizzati nell'area di amministrazione, che appariranno immediatamente nel personalizzatore di WordPress.

Download | Demo | Web hosting

Opzione 2 – Installa manualmente i font personalizzati di WordPress

Usando la direttiva @font-face, puoi collegare uno o più font al tuo sito web. Ma questo metodo ha i suoi pro e contro.

Avantages:

• Grazie ai CSS puoi collegare font di qualsiasi formato: ttf, otf, woff, svg.
• I file dei caratteri si troveranno sul tuo server: non dipenderai da servizi di terze parti.

svantaggi :

• Per la corretta connessione dei caratteri per ogni stile, è necessario registrare un codice separato.
• Senza conoscere i CSS, puoi essere facilmente confuso.

Ma non è un vero problema se puoi basta copiare un codice finito e dove devi specificare i tuoi valori.

osservazione : Prima di iniziare, assicurati di farlo creare un tema figlio per il tuo sito web. In questo modo puoi apportare tutte le modifiche al tuo tema figlio, lasciando il tuo tema principale in modo da poterlo aggiornare facilmente se necessario in futuro.

Passaggio 1: crea una cartella "caratteri".

Nel tuo tema figlio, crea una nuova cartella "caratteri" in: wp-content/themes/your-child-theme/fonts

Passaggio 2. Carica i file dei font scaricati sul tuo sito web

Questo può essere fatto tramite il pannello di controllo dell'hosting o tramite FTP.

Aggiungi tutti i file dei caratteri alla cartella dei caratteri appena aggiunta: wp-content/themes/ Nel tuo tema figlio, crea una nuova cartella "fonts" sotto: wp-content/themes/your-child-theme/fonts che hai creato.

Passaggio 3. Importa i caratteri tramite il foglio di stile del tema figlio

Aprire il file style.css del tuo tema figlio e aggiungi il codice seguente all'inizio del file CSS (dopo il commento del tema figlio):

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

dove MyWebFont è il nome del font e il valore della proprietà src (i dati tra parentesi tra virgolette) è la loro posizione (collegamenti relativi). Dobbiamo specificare ogni stile separatamente.

Poiché colleghiamo prima lo stile normale, impostiamo le proprietà dello spessore del carattere e dello stile del carattere su normale.

Passaggio 4. Quando si aggiunge corsivo, scrivi quanto segue:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

Quando tutto è uguale, siamo gli unici ad allegare la proprietà dello stile del carattere al corsivo.

Passaggio 5. Per aggiungere il carattere in grassetto, aggiungi il codice seguente:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

Dove impostiamo la proprietà font-weight su grassetto.

Ricorda di specificare la posizione corretta dei file dei caratteri per ogni stile.

Passaggio 6. Per collegare il corsivo in grassetto, digitare quanto segue:

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

Bene, questo è tutto. Ora che hai collegato quattro stili di carattere al tuo sito web.

Ma c'è una nota: questa connessione di font non verrà visualizzata correttamente in Internet Explorer 8. La consolazione è che ci sono pochissime persone che usano ancora IE8.

Altre risorse consigliate

Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.

• 10 plugin per fisarmonica WordPress per un sito web
• Come aggiungere più colonne in WordPress
• Alcuni plugin di integrare i servizi Google sul tuo blog
• Plugin 5 WordPress per visualizzare le notifiche
• Utilizzando diversi background WordPress

Conclusione

Qual è la prima cosa che gli utenti notano quando visitano il tuo sito web? Esatto, il suo design! La maggior parte del design si basa sull'uso corretto di bellissimi caratteri. Quindi, devi prenderti cura del design del carattere del tuo sito web. Aggiungi codice o utilizza uno dei plug-in sopra menzionati per incorporare un nuovo stile di carattere. Come scegli dipende da te.

Assicurati di non utilizzare più di due font sullo stesso sito web. Poiché più caratteri personalizzati aggiungi al sito Web, più la velocità del sito Web diminuirà.

Questo è tutto per questo articolo che ti mostra come aggiungere caratteri personalizzati a un sito Web WordPress. Ti invitiamo a provare. Se hai dubbi o suggerimenti, faccelo sapere all'interno commentaires.

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.

Nel frattempo, condividi questo articolo sui tuoi diversi social network.   

...