Come aggiungere caratteri personalizzati a un tema WordPress

I caratteri svolgono un ruolo importante nel design, nella leggibilità e talvolta anche nella funzionalità del tuo sito web. Scegli quello sbagliato e potresti rovinare quello che altrimenti sarebbe un ottimo sito web. Allo stesso modo, sia lo stile che la dimensione del carattere possono determinare quanto sia facile (o meno!) utilizzare il tuo sito web. Ma cosa fai se il tuo font ideale non è disponibile nel tuo tema WordPress? In questo articolo esamineremo diversi modi in cui puoi utilizzare il carattere personalizzato di tua scelta.

Muoviamoci!

Perché usare caratteri personalizzati

Molti temi ora sono dotati di una selezione di caratteri tra cui scegliere che sono "integrati". Questi sono in molti casi adatti al sito web che stai progettando. Ma se non sei in grado di selezionare il font giusto con i font che sono già in offerta, allora è il momento di guardare i font alternativi e questo significa che devi essere in grado di aggiungere i tuoi font personalizzati al tuo sito web.

L'utilizzo di caratteri personalizzati ti consente di sfruttare la bellissima combinazione di caratteri diversi sul tuo sito Web per migliorare la tipografia e l'esperienza dell'utente. La ricerca ha dimostrato che ci sono vantaggi significativi nell'utilizzo della tipografia corretta. Ciò non include solo un miglioramento dell'esperienza utente complessiva, ma anche il modo in cui le informazioni su un sito Web vengono elaborate dal cervello. Più è facile, più è facile comunicare la tua offerta/servizi aziendali ai tuoi clienti.

Sebbene l'utilizzo di caratteri personalizzati possa sicuramente migliorare l'usabilità del tuo sito Web, è importante non impazzire con i caratteri! Una selezione di due caratteri che sono stati accuratamente accoppiati dovrebbe essere ampia. Di più e puoi rischiare di rallentare il tuo sito web.

Andiamo avanti e diamo un'occhiata alle opzioni a nostra disposizione per aggiungere caratteri personalizzati al nostro sito Web WordPress.

Aggiungi Google Fonts con il Google Fonts Plugin

Il modo più semplice e popolare per aggiungere caratteri personalizzati al tuo sito Web WordPress è utilizzare il plug-in Easy Google Fonts.

Dopo aver installato e attivato questo plugin, apri il tuo personalizzatore del tema nel menu Aspetto > Personalizza. Noterai che nella barra laterale sinistra è stato aggiunto un nuovo menu a discesa a fisarmonica chiamato Tipografia.

Fai clic per aprirlo e quindi puoi utilizzare il pulsante "Modifica carattere" per modificare rapidamente i caratteri del tuo sito Web, nonché il rispettivo peso, se sono maiuscoli, ecc. e altro ancora. Puoi anche utilizzare le proprietà CSS per modificare ulteriormente lo stile e il posizionamento dei caratteri scelti.

Inoltre puoi anche aggiungere i tuoi controlli dei caratteri. Per farlo, vai alla pagina delle impostazioni del plug-in in Impostazioni> Google Fonts.

Crea un nuovo controllo del carattere e definisci i selettori CSS. Ad esempio impostiamo le classi .entry-title che corrispondono ai titoli dei post del nostro tema. Quindi, quando visiti nuovamente il personalizzatore, sarà disponibile una nuova casella con il nome specificato per applicare la personalizzazione del carattere ai titoli dei post nello stesso modo in cui abbiamo descritto sopra. Facile!

Aggiungi manualmente i caratteri di Google

Se preferisci non utilizzare un plug-in ma desideri comunque sfruttare l'utilizzo di Google Fonts sul tuo sito Web WordPress, nessun problema. Questi possono essere aggiunti manualmente in modo relativamente semplice. Diamo un'occhiata come. Naturalmente esiste anche un modo manuale per aggiungere Google Fonts al tuo sito web.

Primo passo:

Innanzitutto, devi ottenere il link del tuo carattere dal sito dei caratteri di Google.

Diciamo che vuoi usare la famiglia di caratteri Roboto. Quando fai clic su questo carattere verrai trasferito alla sua pagina dove puoi visualizzare in anteprima qualsiasi testo per assicurarti che il carattere sia adatto a te. Sul lato destro vedrai una casella "Utilizza sul Web" che include il link necessario per aggiungerlo al tuo sito.

Per accodare correttamente Google Fonts in WordPress, apri il file functions.php del tuo tema con il tuo editor preferito e inserisci il seguente codice alla fine:

 function my_google_fonts() { wp_enqueue_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap', false ); } add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );

Copia l'URL fornito nel testo del collegamento di Google (inizia con https://) e poi sostituiscilo nel codice sopra (nel nostro esempio è attualmente https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap )

Quindi nel file style.css del tuo tema usa il font come faresti con qualsiasi altro font, seguendo le "Regole CSS per specificare le famiglie" fornite da Google.

 h1, h2, h3 { font-family: 'Roboto', sans-serif; }

Ora nel front-end del tuo sito dovresti vedere il carattere Roboto applicato alle aree in cui è stato specificato nel tuo file CSS.

Aggiungi caratteri Adobe

Un'ottima alternativa a Google Fonts sono i font di Adobe Fonts. Il plug-in Custom Adobe Fonts ti aiuta a incorporare facilmente questi caratteri nel tuo sito Web WordPress e attualmente funziona con il tema Astra, il tema Beaver Builder, il plug-in Beaver Builder e l'elementor Page Builder.

Per iniziare, installa il plug-in e quindi vai alla vasta libreria di caratteri di Adobe per trovare un carattere adatto a te (dovrai registrarti per accedere).

Ci sono un sacco di modi per filtrare i caratteri e il sistema è abbastanza intuitivo da usare. Una volta trovato un carattere che ti piace, fai clic su di esso e guarda nella parte in alto a destra della pagina dove vedrai la scritta "Aggiungi al progetto web". Si aprirà una casella come quella qui sotto. Assegna un nome al tuo progetto web e seleziona le varianti di carattere che desideri includere in questo.

Una volta assegnato un nome e premuto il pulsante "Crea", verrai indirizzato alla schermata successiva in cui vengono forniti un codice di incorporamento HTML e le regole CSS. Ora hai due scelte. Puoi a) continuare a utilizzare il plug-in dei caratteri Adobe personalizzati oppure b) incorporare questi caratteri manualmente.

Utilizzo del plug-in di caratteri Adobe personalizzati

Questo è il modo più semplice per inserire i tuoi font Adobe nel tuo sito web. Una volta creato il tuo progetto, fai clic su "Progetti Web" e trova il tuo progetto nell'elenco. Vedrai in alto che c'è un codice "ID progetto" (come mostrato di seguito). Ora vai alle impostazioni del plug-in di Adobe Font e fai clic su "Caratteri personalizzati Typekit" dal menu. Inserisci questo ID progetto in questa casella e salva.

Ora vedrai questo font elencato nel Customizer di WordPress, Elementor o altro generatore di pagine compatibile che utilizzi. Seleziona e sei a posto.

Incorporamento manuale di caratteri personalizzati

L'incorporamento manuale dei font Adobe avviene esattamente nello stesso modo descritto per l'incorporamento dei font Google. Vedrai un collegamento per incorporare un foglio di stile fornito da Adobe (mostrato di seguito) nella panoramica del progetto Web. Per visualizzare le classi CSS, fai clic sul testo "Modifica progetto" e questi sono forniti insieme a ogni stile di carattere.

Come trovare caratteri personalizzati e accoppiarli

Puoi anche trovare e scaricare il font ideale per il tuo sito e caricarlo dalle cartelle del tuo sito Web poiché ci sono molte risorse là fuori che forniscono font gratuiti o premium in un'ampia varietà.

Puoi anche ottenere aiuto dallo strumento online Font Pair, ottimo per visualizzare in anteprima le combinazioni di caratteri in modo da poter combinare e abbinare i caratteri come meglio credi. Il modo in cui presenta le coppie di caratteri, è anche facile scoprire altri suggerimenti di abbinamento navigando.

Nel nostro blog puoi anche trovare due ottimi articoli sull'abbinamento dei caratteri. C'è la guida all'abbinamento dei caratteri per i web designer + 30 esempi sorprendenti! nel caso in cui desideri saperne di più sull'abbinamento dei caratteri dal punto di vista del design con un'ottima consulenza su ciò su cui dovresti enfatizzare e come ottenere la migliore leggibilità e sensazione. Maggiori dettagli sugli strumenti di abbinamento dei font sono disponibili nel nostro articolo I 10 migliori strumenti di abbinamento dei font per i web designer.

Carica caratteri personalizzati dalle cartelle

Sebbene Google Fonts e Adobe Fonts offrano una fantastica selezione tra cui scegliere, oltre a un modo semplice per utilizzarli sul tuo sito Web, non è l'unica opzione a tua disposizione nella tua ricerca del carattere perfetto.

Esistono diversi siti Web eccellenti che vendono caratteri personalizzati che sono stati creati con cura dai designer. Font Squirrel, ad esempio, offre una vasta libreria di caratteri e, soprattutto, consente l'uso commerciale e un formato facile da implementare per questi caratteri. Ci sono un misto di font gratuiti e "premium" sul sito (che devono essere pagati).

Un ottimo font che potresti prendere in considerazione da Font Squirrel è Fira Sans. Usiamo questo come esempio per scoprire come installarlo sul nostro sito Web WordPress per l'uso.

Per prima cosa, fai clic sulla scheda 'Webfont Kit'. Spunta la casella "WOFF", quindi fai clic su "Scarica kit @Font-Face".

Otterrai un file zip che ora deve essere estratto. In questa cartella troverai il file del carattere insieme a un file stylesheet.css che contiene il codice di cui avrai bisogno per il tuo foglio di stile CSS.

Ad esempio, per OpenSans-ExtraBold-webfont, dobbiamo usare il seguente CSS:

 @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff2') format('woff2'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

La soluzione migliore è posizionare tutti i file di font di tutti i formati all'interno di una directory appropriata a tua scelta nella cartella del tema. Nel nostro esempio, si trova nella cartella /wp-content/themes/twentytwenty/assets/fonts/open-sans/ .

All'interno della stessa cartella crea un file open-sans.css e inserisci tutto il codice CSS di ogni file stylesheet.css in modo che il suo contenuto assomigli a questo:

 @font-face { font-family: 'open_sansbold'; src: url('OpenSans-Bold-webfont.eot'); src: url('OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-Bold-webfont.woff') format('woff'), url('OpenSans-Bold-webfont.ttf') format('truetype'), url('OpenSans-Bold-webfont.svg#open_sansbold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansbold_italic'; src: url('OpenSans-BoldItalic-webfont.eot'); src: url('OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-BoldItalic-webfont.woff') format('woff'), url('OpenSans-BoldItalic-webfont.ttf') format('truetype'), url('OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'open_sansextrabold'; src: url('OpenSans-ExtraBold-webfont.eot'); src: url('OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'), url('OpenSans-ExtraBold-webfont.woff') format('woff'), url('OpenSans-ExtraBold-webfont.ttf') format('truetype'), url('OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg'); font-weight: normal; font-style: normal; }

Questo aiuta anche i vari browser a selezionare il carattere che supporta. Se hai bisogno di accodare il file CSS dei caratteri in modo WordPress, dovresti farlo in functions.php in questo modo:

 function my_custom_fonts() { wp_enqueue_style( 'my-custom-fonts', get_template_directory_uri() . '/assets/fonts/open-sans/open-sans.css', false ); } add_action( 'wp_enqueue_scripts', 'my_custom_fonts' );

Non dimenticare di sostituire l'URL con il percorso del file open-sans.css.

Conclusione

La scelta del carattere giusto durante la creazione del tuo sito Web ha un impatto significativo sull'aspetto e sul funzionamento del tuo sito Web. Con così tanti fantastici caratteri tra cui scegliere, non pensare di dover attenersi solo ai caratteri forniti dal tuo tema. Speriamo che questo articolo ti mostri come puoi utilizzare qualsiasi tipo di carattere adatto per il tuo sito Web WordPress!