Come aggiungere caratteri personalizzati al tuo sito WordPress

Come aggiungere caratteri personalizzati al tuo sito WordPress

Perché rendere il tuo blog noioso usando i caratteri standard? Lascia che il tuo blog parli della tua vibrante personalità e degli argomenti trattati con un’ampia varietà di caratteri personalizzati. I caratteri personalizzati sono una bella funzionalità che consente al tuo blog di apparire preferibile agli altri.


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

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

Scopriamolo.

 Perché dovrei usare caratteri personalizzati?

Sono passati i giorni in cui Times New Roman e la Georgia erano considerati gli unici caratteri per i testi 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 caratteri gratuiti, informazioni e strumenti di formazione e risorse progettate per la progettazione, disponibili su Internet. A differenza di Adobe Illustrator, Photoshop e altre applicazioni classiche, WordPress non offre il controllo completo sui caratteri per impostazione predefinita. Solo alcuni temi scelgono di supportare e utilizzare caratteri personalizzati.

Pertanto, in questo post, imparerai come trovare caratteri personalizzati adatti e come usarli nel tuo sito WordPress.

L’importanza dell’uso di caratteri personalizzati

Perché cambiare carattere, rientro tra parole, interlinea, spaziatura tra lettere o saturazione del carattere, chiedi? Comunque sia, alcuni studi lo dimostrano la tipografia migliora la comprensione della lettura.

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

Il design dei caratteri influisce sui lettori, anche se non vi prestano attenzione. Abbandonare il design del carattere significa abbandonare lo sviluppo stesso! L’umore del lettore dipende da questo. Il carattere rende la lettura più semplice o forza gli utenti a lasciare la pagina.

Tutti i browser Web includono un set di caratteri predefiniti. Ciò significa che se il carattere non è specificato nel CSS della pagina, verrà utilizzata la versione standard. Puoi sempre utilizzare i caratteri predefiniti, ma complicano il lavoro degli utenti. Ecco perché è essenziale utilizzare un carattere personalizzato. Se il tuo tema non ti offre opzioni per cambiare il carattere, molti siti web e strumenti possono aiutarti.

Google Fonts Alternatives

Dove trovare caratteri personalizzati

Molti di voi conoscono i caratteri Google gratuiti. Ci sono molti altri siti dove puoi trovare bellissimi caratteri. Alcuni di essi sono gratuiti per uso personale. Se è necessario per uso commerciale, è necessaria una licenza. Google Fonts e Adobe Edge Fonts sono gratuiti. Ecco perché non sono così unici. E questo non ci va bene.

Eccone alcuni altre risorse per la ricerca di caratteri per uso gratuito e commerciale:

  1. TemplateMonster – Sul sito Web del marketplace TemplateMonster troverai tutto il Web Design di cui hai bisogno. Ci sono anche molti tipi di carattere e pacchetti di caratteri per uso personale a un piccolo prezzo. Inoltre, sono presentati al ONE kit di sviluppo web. La collezione è enorme e creativa. Per aiutarti a scegliere, tutti i caratteri presentati su brochure o cornici. Ogni carattere è presentato anche con una licenza commerciale.
  2. MyFonts – MyFonts offre attualmente la più grande selezione di caratteri al mondo. Tuttavia, i prezzi qui sono anche nel segmento più alto. Quindi, se hai un budget limitato, potrebbe non essere adatto a te.
  3. FontSpring – Fontspring vende caratteri di fantasia per uso commerciale. Ma in quasi ogni famiglia 1-2 caratteri gratuiti che possono essere utilizzati per scopi personali. Inoltre, c’è una sezione separata con caratteri gratuiti. La collezione è vibran. Ma dovrai studiare attentamente le informazioni sulla licenza per un determinato carattere prima di scaricare.
  4. Cufonfonts – È anche una vasta raccolta di caratteri diversi. Seleziona qualsiasi e vedrai una pagina con informazioni dettagliate al riguardo. Ci sono molti caratteri 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.500 caratteri gratuiti. La maggior parte di questi sono progettati solo per uso personale. Una bella caratteristica DaFont è un sistema di categorie. Puoi selezionare i caratteri nello stile di fumetti, videogiochi, vintage o stilizzati come personaggi giapponesi.

La scelta dei caratteri è molto allettante perché sono tutti bellissimi. Ma non dovresti scegliere molto. Uso non più di due caratteri sul sito. Quindi l’aspetto del tuo sito Web sarà coerente. Una volta scelti i caratteri, assicurati di scaricare i file per ogni stile che utilizzerai (normale, grassetto, corsivo, ecc.).

Ora che hai selezionato il carattere appropriato per il sito, scopriamo come aggiungerlo.

Come aggiungere caratteri personalizzati a WordPress

Esistono alcuni modi per aggiungere caratteri a un sito WordPress:

  1. plugin: in questo caso, diversi plugin WordPress vengono utilizzati per facilitare il processo.
  2. manualmente: utilizzando questo metodo, è necessario un caricamento del carattere scaricato sul sito e modificare il file CSS.
  3. Temi: molti temi popolari includono opzioni integrate per personalizzare i caratteri (nota: non copriremo questa opzione poiché il processo varierà in base al tema che stai utilizzando, ma temi premium di qualità come il tema Total WordPress offriranno online documenti che puoi seguire facilmente, ad esempio questa guida per aggiungere caratteri personalizzati al totale)

Opzione 1: modifica i caratteri di WordPress con plugin

Se non ci interessiamo dei cambiamenti globali, possiamo installare plugin di WordPress che cambieranno i caratteri sul tuo sito.

Caratteristiche dei plugin di caratteri personalizzati

Il software open source ha un vantaggio per l’interesse della comunità e WordPress ha anche questo vantaggio. Diversi plugin di WordPress ti consentono di aggiungere caratteri personalizzati. Come scegliere un plug-in adatto con così tanti? Quali sono le caratteristiche dei plugin di font personalizzati?

Ecco alcuni punti da prendere in considerazione:

  • Possibilità di utilizzare caratteri personalizzati
  • Possibilità di utilizzare più di un carattere
  • Intestazioni e componenti target
  • Bonus: la possibilità di modificare le impostazioni dei caratteri dall’editor visivo

È tutto. La prima funzionalità dell’elenco è molto importante. Puoi sempre scaricare caratteri da siti come DaFont, Font Squirrel, ecc., Ma devi essere in grado di caricarli su WordPress.

Diamo un’occhiata ad alcuni plugin per WordPress che ti consentono di caricare caratteri personalizzati.

Caricatore di caratteri personalizzato

Caricatore di caratteri personalizzato

Questo plugin ti consente di scaricare i caratteri di Google e applicarli a vari elementi del tuo blog. Ad esempio, alle intestazioni o al corpo dell’articolo o della pagina.

Usa qualsiasi carattere

Usa qualsiasi carattere

Questo è un plugin per WordPress che ti offre una comoda interfaccia per scaricare caratteri e usarli direttamente attraverso l’editor visivo. L’editor visivo di WordPress può cambiare automaticamente il carattere di qualsiasi testo. Questo plugin offre diverse funzionalità, il che rende il processo di aggiunta di caratteri personalizzati molto più gestibile.

WP Google Fonts

WP Google Fonts

WP Google Fonts ti consente di utilizzare il catalogo dei font di Google. Uno dei fantastici vantaggi di questo plugin è l’aggiunta di quasi 1000 caratteri Google. Sebbene sia possibile accodare manualmente i caratteri Google, è molto più semplice utilizzare un plug-in per la maggior parte degli utenti.

Come installare i caratteri con un plugin?

Prendiamo, ad esempio, WP Google Fonts. Installa questo plugin dal repository ufficiale di WordPress e apri la sezione Google Fonts.

WP Google Fonts

Vedrai un pannello di controllo dei caratteri di Google qui. Scegli i caratteri e modifica varie impostazioni, come lo stile del carattere, gli elementi a cui viene applicato, ecc.

Opzione 2: installa manualmente i caratteri personalizzati di WordPress

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

Professionisti:

  • Tramite CSS, è possibile collegare caratteri di qualsiasi formato: ttf, otf, woff, svg.
  • I file dei caratteri si troveranno sul tuo server – non dipenderai da servizi di terze parti.

Contro:

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

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

Nota: Prima di iniziare, assicurati di creare un tema figlio per il tuo sito. In questo modo puoi apportare tutte le modifiche al tema del tuo bambino, lasciando intatto il tuo tema principale in modo da poterlo aggiornare facilmente secondo necessità in futuro.

Passaggio 1: creare una cartella “caratteri”

All’interno del tema figlio, crea una nuova cartella “caratteri” in: wp-content / themes / il-tuo-figlio-a tema / fonts

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

Questo può essere fatto tramite il pannello di controllo del tuo hosting o via FTP.

Aggiungi tutti i file dei caratteri alla cartella dei caratteri appena aggiunti: wp-content / themes / il-tuo-figlio-a tema / fonts hai creato.

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

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

@ Font-face {
famiglia di caratteri: 'MyWebFont';
src: url ('fonts / WebFont.eot');
src: formato url ('fonts / WebFont.eot? #iefix') ('embedded-opentype'),
formato url ('fonts / WebFont.woff') ('woff'),
formato url ('fonts / WebFont.ttf') ('truetype'),
formato url ('fonts / WebFont.svg # svgwebfont') ('svg');
peso carattere: normale;
stile carattere: normale;
}

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

Dal momento che connettiamo per la prima volta lo stile normale, impostiamo le proprietà di peso e stile del carattere su normali.

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

@ Font-face {
famiglia di caratteri: 'MyWebFont';
src: url ('fonts / WebFont-Italic.eot');
src: formato url ('fonts / WebFont-Italic.eot? #iefix') ('embedded-opentype'),
formato url ('fonts / WebFont-Italic.woff') ('woff'),
formato url ('fonts / WebFont-Italic.ttf') ('truetype'),
formato url ('fonts / WebFont-Italic.svg # svgwebfont') ('svg');
peso carattere: normale;
stile carattere: corsivo;
}

Dove tutto è uguale, solo noi abbiamo collegato la proprietà in stile carattere al corsivo.

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

@ Font-face {
famiglia di caratteri: 'MyWebFont';
src: url ('fonts / WebFont-Bold.eot');
src: formato url ('fonts / WebFont-Bold.eot? #iefix') ('embedded-opentype'),
formato url ('fonts / WebFont-Bold.woff') ('woff'),
formato url ('fonts / WebFont-Bold.ttf') ('truetype'),
formato url ('fonts / WebFont-Bold.svg # svgwebfont') ('svg');
peso carattere: grassetto;
stile carattere: normale;
}

Dove impostiamo la proprietà del peso del carattere su grassetto.

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

Passaggio 6. Per connettere il corsivo grassetto digitare quanto segue:

@ Font-face {
famiglia di caratteri: 'MyWebFont';
src: url ('fonts / WebFont-Italic-Bold.eot');
src: formato url ('fonts / WebFont-Italic-Bold.eot? #iefix') ('embedded-opentype'),
formato url ('fonts / WebFont-Italic-Bold.woff') ('woff'),
formato url ('fonts / WebFont-Italic-Bold.ttf') ('truetype'),
formato url ('fonts / WebFont-Italic-Bold.svg # svgwebfont') ('svg');
peso carattere: grassetto;
stile carattere: corsivo;
}

Bene, tutto qui �� Ora hai collegato quattro stili di carattere al tuo sito web.

Ma c’è un’osservazione: questa connessione di font verrà visualizzata in modo errato in Internet Explorer 8. La consolazione è che ci sono pochissime persone che usano ancora IE8.

Confezione di caratteri personalizzati per WordPress

Qual è la prima cosa che gli utenti notano quando visitano il tuo sito? Bene, il suo design! Gran parte del design si basa sull’uso corretto di bellissimi caratteri. Quindi devi occuparti del design dei caratteri del tuo sito. Aggiungi codice o usa uno dei plugin sopra menzionati per incorporare un nuovo stile di carattere. Il modo in cui lo scegli dipende da te.

Assicurati di non utilizzare più di due caratteri nello stesso sito. Poiché più caratteri personalizzati aggiungi al sito, tanto più lenta diventa la velocità del sito.

Questo è tutto, sentiti libero di commentare. 

Saremo anche felici di sapere quale opzione scegli per aggiungere un carattere personalizzato al tuo sito Web e dove trovi il tuo carattere.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map