Un ottimo modo per aggiungere un po' di branding e individualismo al tuo sito WordPress è cambiare i caratteri nel tuo tema.

La tipografia e altri elementi di banding creano una buona prima impressione, creano l'atmosfera per i visitatori del tuo sito e stabiliscono l'identità del tuo marchio. Gli studi^(Studies) hanno anche scoperto che i caratteri influenzano la capacità dei lettori di apprendere, richiamare informazioni e memorizzare testi.

Se hai appena installato un tema WordPress^{(installed a WordPress theme)} o hai esperienza di codifica e CSS , ti mostreremo diverse opzioni che puoi utilizzare per cambiare i caratteri in WordPress .

Come cambiare i caratteri in WordPress^{(How to Change Fonts in WordPress)}

Ci sono tre opzioni principali disponibili per cambiare i caratteri in WordPress:

• Utilizza font Web come Google Fonts , Fonts.com o Adobe Edge Web Fonts , che sono ospitati su un sito di terze parti
• Codifica^(Code) i caratteri web nel tuo tema e mettili in coda
• Ospita^(Host) i caratteri sul tuo sito e aggiungili al tuo tema

1. Come modificare i caratteri in WordPress utilizzando i caratteri Web^{(1. How to Change Fonts in WordPress Using Web Fonts)}

L'uso dei caratteri Web è un modo più semplice e veloce per cambiare i caratteri in WordPress rispetto al download e al caricamento di file di caratteri.

Con questa opzione, puoi accedere a una varietà di caratteri^{(access a variety of fonts)} senza aggiornarli ogni volta che c'è una modifica e non occupa spazio sul server sul tuo hosting. I font vengono serviti direttamente dai server del provider utilizzando un plug-in o aggiungendo codice al tuo sito.

Assicurati^(Make) che i caratteri web che scegli per il tuo sito corrispondano all'identità del tuo marchio, siano facili da leggere per il corpo del testo, siano familiari ai visitatori del sito web e trasmettano il tipo di umore e l'immagine che desideri.

Puoi aggiungere font web utilizzando un plug-in di WordPress^{(using a WordPress plugin)} o manualmente aggiungendo alcune righe di codice al tuo sito. Esploriamo entrambe le opzioni.

Come aggiungere caratteri Web utilizzando un plug-in di WordPress^{(How to Add Web Fonts Using a WordPress Plugin)}

A seconda del font web che hai scelto, puoi utilizzare un plugin di WordPress per accedere alla libreria di font e scegliere quello che desideri sul tuo sito. Per questa guida, abbiamo scelto Google Fonts e utilizzato il plug -in Tipografia di Google Fonts .^{(Google Fonts Typography)}

1. Per iniziare, accedi alla dashboard di amministrazione di WordPress e seleziona ^(WordPress)Plugins > Add New .

1. Digita Google Fonts Typography nella casella di ricerca e seleziona Installa ora^{(Install Now)} .

1. Seleziona Attiva^(Activate) .

1. Quindi, accedi al Customizer andando su Appearance > Customize .

1. Seleziona la sezione Google Fonts .

1. Quindi, fai clic sul collegamento per aprire le impostazioni dei caratteri e configurarli come segue:

• In Impostazioni di base^{(Basic Settings)} , imposta il carattere predefinito per il corpo del testo, i titoli e i pulsanti.

• In Impostazioni avanzate^{(Advanced Settings)} , configura il titolo e la descrizione del sito, il menu, i titoli e il contenuto, la barra laterale e il piè di pagina.

• Deseleziona^(Uncheck) eventuali pesi dei caratteri indesiderati nella sezione Caricamento caratteri^{(Font Loading)} per evitare di rallentare il tuo sito^{(avoid slowing down your site)} .

Se sul tuo sito sono presenti caratteri che non vengono visualizzati o non funzionano correttamente, utilizza la sezione Debug^{(Debugging )} per la risoluzione dei problemi.

1. Puoi testare queste impostazioni nella Personalizzazione^(Customizer) per assicurarti che funzionino nel modo desiderato, quindi selezionare Pubblica^(Publish) .

Nota^(Note) : se dimentichi di selezionare la pubblicazione in Customizer , perderai tutte le modifiche apportate.

Come aggiungere caratteri Web utilizzando il codice^{(How to Add Web Fonts Using Code)}

Puoi installare e utilizzare i caratteri web se hai accesso al codice del tuo tema. Questa è un'alternativa manuale all'aggiunta di un plug-in aggiuntivo, ma non è complicato se segui attentamente i passaggi.

Tuttavia, ci sono diversi passaggi da eseguire se stai utilizzando un tema dalla directory dei temi di WordPress o un tema personalizzato.

Se hai acquistato un tema dalla directory dei temi di WordPress , crea un tema figlio^{(create a child theme)} e quindi assegnagli il file style.css e functions.php. È più facile se hai un tema personalizzato in quanto puoi modificare il foglio di stile e il file delle funzioni dal tuo tema.

1. Per iniziare, seleziona un font dalla libreria di Google Fonts e seleziona l' icona + (plus) per aggiungerlo alla tua libreria.

1. Successivamente, seleziona la scheda in basso dove troverai il codice da aggiungere al tuo sito. Vai alla sezione Incorpora carattere^{(Embed font)} nella scheda Incorpora . ^(Embed)Troverai il codice generato da Google Fonts , che assomiglia a questo:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Nota^(Note) : abbiamo scelto Work Sans per questa guida, quindi il nome del carattere potrebbe essere diverso dal tuo a seconda di ciò che hai scelto.

1. Copia questa parte del codice: https://fonts.googleapis.com/css2?family=Work+Sans

Ciò ti consente di accodare lo stile dai server di Google Fonts per evitare conflitti con plug-in di terze parti. Consente inoltre di modificare più facilmente i temi figlio.

1. Per accodare il font, apri il file functions e aggiungi il codice seguente. ( Sostituisci^(Replace) il link con il link che ottieni da Google Fonts ):

funzione wosib_add_google_fonts() { ^{(function wosib_add_google_fonts() {)}
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( 'Font Google'); ^{(wp_enqueue_style( ‘googleFonts’);)}
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

1. Puoi aggiungere una nuova riga alla tua funzione o alla stessa riga se desideri aggiungere più caratteri in futuro come segue:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( 'Font Google'); ^{(wp_enqueue_style( ‘googleFonts’);)}
}

add_action( 'wp_enqueue_scripts', 'mybh_add_google_fonts' );

In questo caso, abbiamo accodato entrambi i font Cambria e Work Sans .

Il passaggio successivo consiste nell'aggiungere i caratteri al foglio di stile del tuo tema per far funzionare il carattere sul tuo sito.

1. Per fare ciò, apri il file style.css del tuo tema e aggiungi il codice per dare uno stile ai singoli elementi con i tuoi caratteri web come segue:

body {
famiglia di caratteri: 'Work Sans', sans-serif; ^{(font-family: ‘Work Sans’, sans-serif; )}
}

h1, h2, h3 {
famiglia di caratteri: 'Cambria', serif; ^{(font-family: ‘Cambria’, serif;)}
}

In questo caso, il carattere principale sarà Work Sans mentre gli elementi di intestazione come h1, h2 e h3 utilizzeranno Cambria .

Una volta terminato, salva il foglio di stile e controlla se i tuoi caratteri funzionano come dovrebbero. In caso contrario, verifica che i caratteri non vengano sovrascritti nel foglio di stile oppure svuota la cache del browser e riprova.

1. Avere un font di backup in atto per garantire che i font possano essere visualizzati o accessibili facilmente soprattutto per gli utenti con vecchi dispositivi, connessioni scadenti o se il provider del font ha problemi tecnici. Per fare ciò, vai al foglio di stile e modifica il CSS per leggere quanto segue:

body {
famiglia di caratteri: 'Work Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
}

h1, h2, h3 {
famiglia di caratteri: 'Cambria', Times New Roman, serif; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Se tutto va bene, i visitatori del tuo sito vedranno i tuoi caratteri web predefiniti, nel nostro caso Work Sans e Cambria . In caso di problemi, vedranno i caratteri di backup, ad esempio Arial o Times New Roman nel nostro caso.

2. Come modificare i caratteri in WordPress ospitando i caratteri^{(2. How to Change Fonts in WordPress by Hosting Fonts)}

L'hosting di font sui tuoi server ti aiuta a ottimizzare le prestazioni dei tuoi font web, ma è anche un modo più sicuro per^{(a more secure way)} farlo invece di attingere risorse da siti di terze parti.

I caratteri Google^(Google) e altri caratteri Web ti consentono di scaricare i caratteri da utilizzare come caratteri ospitati localmente, ma puoi comunque scaricare altri caratteri sul tuo computer a condizione che le licenze ti consentano di farlo.

1. Per iniziare, scarica, decomprimi, carica il file del carattere sul tuo sito e quindi collegalo nel tuo foglio di stile. In questo caso non devi accodare i caratteri nel file functions.php come hai fatto con i caratteri web. Verifica che i file che stai caricando siano nel formato .woff prima di utilizzarli sul tuo sito web.

1. Quindi, vai su wp-content/themes/themename per caricare il file del carattere sul tuo tema. 
2. Apri il foglio di stile e aggiungi il seguente codice (in questo caso stiamo usando il font Work Sans ma puoi sostituirlo con i tuoi font):

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normale; ^{( font-weight: normal;)}
stile del carattere: normale; ^{( font-style: normal;)}
}

@font-face {
font-family: 'Work Sans';
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: grassetto; ^{( font-weight: bold;)}
stile del carattere: normale; ^{(font-style: normal;)}
}

@font-face {
font-family: 'Cambria';
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normale; ^{( font-weight: normal;)}
stile del carattere: normale; ^{( font-style: normal;)}
}

Nota^(Note) : l'utilizzo di @fontface ti consente di utilizzare grassetto, corsivo e altre varianti del tuo carattere, dopodiché puoi specificare il peso o lo stile per ciascun carattere.

1. Quindi, aggiungi lo stile per i tuoi elementi come segue:

body {
famiglia di caratteri: 'Work Sans', Arial, sans-serif; ^{(font-family: ‘Work Sans’, Arial, sans-serif;)}
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
famiglia di caratteri: 'Cambria', Times New Roman, serif; ^{(font-family: ‘Cambria’, Times New Roman, serif;)}
}

Personalizza la tua tipografia di WordPress^{(Customize Your WordPress Typography)}

Modificare i caratteri in WordPress è un'ottima idea per migliorare il branding e l'esperienza utente. Non è un compito semplice, ma avrai un maggiore controllo sul tuo tema.

Sei^(Were) riuscito a personalizzare i caratteri del tuo sito utilizzando i passaggi con i suggerimenti in questa guida? Raccontacelo^(Tell) nei commenti.

How to Change Fonts in WordPress

A great way to аdd some branding and individualism to your WordPress site is to change the fonts in your theme.

Typography and other banding elements create a good first impression, set the mood for your site’s visitors, and establish your brand’s identity. Studies have also found that fonts affect readers’ ability to learn, recall information, and memorize texts.

If you just installed a WordPress theme or have some CSS and coding experience, we’ll show you several options you can use to change fonts in WordPress.

How to Change Fonts in WordPress

There are three main options available for you to change fonts in WordPress:

• Use web fonts like Google Fonts, Fonts.com, or Adobe Edge Web Fonts, which are hosted on a third-party site
• Code web fonts into your theme and enqueue them
• Host fonts on your site and add them to your theme

1. How to Change Fonts in WordPress Using Web Fonts

Using web fonts is an easier and quicker way to change fonts in WordPress than downloading and uploading font files.

With this option, you can access a variety of fonts without updating them each time there’s a change, and it doesn’t hog server space on your hosting. The fonts are served directly from the provider’s servers using a plugin or by adding code to your site.

Make sure the web fonts you choose for your site match your brand identity, are easy to read for body text, are familiar to website visitors, and convey the kind of mood and image that you want.

You can add web fonts using a WordPress plugin or manually by adding a few lines of code to your site. Let’s explore both options.

How to Add Web Fonts Using a WordPress Plugin

Depending on the web font you’ve chosen, you can use a WordPress plugin to access the library of fonts and pick out the one you want on your site. For this guide, we chose Google Fonts and used the Google Fonts Typography plugin.

1. To get started, log in to your WordPress admin dashboard, and select Plugins > Add New.

1. Type Google Fonts Typography in the search box, and select Install Now.

1. Select Activate.

1. Next, access the Customizer by going to Appearance > Customize.

1. Select the Google Fonts section.

1. Next, click on the link to open the fonts’ settings and configure them as follows:

• Under Basic Settings, set the default font for your body text, headings, and buttons.

• Under Advanced Settings, configure your site title and description, menu, headings and content, sidebar, and footer.

• Uncheck any unwanted font weights in the Font Loading section to avoid slowing down your site.

If there are fonts on your site that aren’t displaying or working properly, use the Debugging section to troubleshoot.

1. You can test these settings in the Customizer to make sure they’re working the way you want them to, and then select Publish.

Note: If you forget to select publish in the Customizer, you’ll lose all the changes you’ve made.

How to Add Web Fonts Using Code

You can install and use web fonts if you have access to your theme’s code. This is a manual alternative to adding an extra plugin, but it’s not complicated if you follow the steps carefully.

However, there are different steps to take if you’re using a theme from the WordPress theme directory or a customized theme.

If you bought a theme from the WordPress theme directory, create a child theme and then give it the style.css and functions.php file. It’s easier if you have a customized theme as you can edit the stylesheet and functions file from your theme.

1. To get started, select a font from the Google Fonts library, and select the + (plus) icon to add it to your library.

1. Next, select the tab at the bottom where you’ll find the code to add to your site. Go to the Embed font section under the Embed tab. You’ll find the code generated by Google Fonts, which looks something like this:

<link href=”https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap” rel=”stylesheet”>

Note: We picked Work Sans for this guide so the font name may be different on yours depending on what you picked.

1. Copy this part of the code: https://fonts.googleapis.com/css2?family=Work+Sans

This allows you to enqueue the style from Google Fonts servers to prevent conflict with third-party plugins. It also allows for easier child theme modifications.

1. To enqueue the font, open the functions file and add the following code. (Replace the link with the link you get from Google Fonts):

function wosib_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

1. You can add a new line to your function or to the same line if you want to add more fonts in future as follows:

function mybh_add_google_fonts() {
wp_register_style( ‘googleFonts’, ‘https://fonts.googleapis.com/css?family=Cambria|Work Sans’);

wp_enqueue_style( ‘googleFonts’);
}

add_action( ‘wp_enqueue_scripts’, ‘mybh_add_google_fonts’ );

In this case, we’ve enqueued both Cambria and Work Sans fonts.

The next step is to add the fonts to your theme’s stylesheet to make the font work on your site.

1. To do this, open your theme’s style.css file and add the code to style individual elements with your web fonts as follows:

body {
font-family: ‘Work Sans’, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, serif;
}

In this case, the main font will be Work Sans while header elements like h1, h2, and h3 will use Cambria.

Once done, save the stylesheet and check whether your fonts are working as they should. If not, check that the fonts aren’t being overridden in the stylesheet, or clear your browser cache and try again.

1. Have a backup font in place to ensure that the fonts can be rendered or accessed easily especially for users with old devices, poor connections, or if the font provider has technical issues. To do this, go to the stylesheet and edit the CSS to read as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

If all is well, your site’s visitors will see your default web fonts, in our case Work Sans and Cambria. If there are issues, they’ll see the backup fonts, for example Arial or Times New Roman in our case.

2. How to Change Fonts in WordPress by Hosting Fonts

Hosting fonts on your own servers helps you optimize the performance of your web fonts, but it’s also a more secure way of doing it instead of pulling in resources from third-party sites.

Google Fonts and other web fonts allow you to download fonts for use as locally hosted fonts, but you can still download other fonts to your computer provided the licenses permit you to do so.

1. To get started, download, unzip, upload the font file to your site and then link it in your stylesheet. In this case you don’t have to enqueue the fonts in the functions.php file as you did with the web fonts. Confirm that the files you’re uploading are in the .woff format before using them on your website.

1. Next, go to wp-content/themes/themename to upload the font file to your theme. 
2. Open the stylesheet and add the following code (in this case we’re using Work Sans font but you can replace that with your own fonts):

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Medium.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: ‘Work Sans’;
src: url( “fonts/Work Sans-Bold.ttf”) format(‘woff’); /* medium */
font-weight: bold;
font-style: normal;
}

@font-face {
font-family: ‘Cambria’;
src: url( “fonts/Cambria.ttf”) format(‘woff’); /* medium */
font-weight: normal;
font-style: normal;
}

Note: Using @fontface allows you to use bold, italics and other variations of your font, after which you can specify the weight or style for each font.

1. Next, add styling for your elements as follows:

body {
font-family: ‘Work Sans’, Arial, sans-serif;
src: url( “/fonts/Work Sans-Medium.ttf” );
}

h1, h2, h3 {
font-family: ‘Cambria’, Times New Roman, serif;
}

Customize Your WordPress Typography

Changing fonts in WordPress is a great idea to improve the branding and user experience. It’s not a straightforward task, but you’ll have more control over your theme.

Were you able to customize your site’s fonts using the steps using the tips in this guide? Tell us in the comments.

Related posts

• Come spostarsi WordPress site da un host a un altro

• Come installare e configurazione WordPress su Microsoft Azure

• Come correre Blowingly Fast WordPress su Microsoft Azure

• Come configurare Privacy in WordPress e perché è importante

• Come installare WordPress su Google Cloud Platform

• Squarespace Vs WordPress: qual è la migliore piattaforma del sito?

• Come controllare se un sito Web è bannato da AdSense

• Il miglior formato di scrittura di blog per ottenere i tuoi punti

• Come rimuovere malware dal tuo sito WordPress

• 8 Temi gratuiti Premium WordPress da installare

• Che cos'è AMP per WordPress e come installarlo

• Come velocizzare un sito WordPress in 11 passaggi

• Come duplicare una pagina in WordPress

• Come rimuovere tutte le tracce di un plugin di WordPress

• Tutorial Gutenberg di WordPress: come utilizzare il nuovo editor

• Protect e WordPress website al sicuro da hacker

• Come configurare il tuo sito Web simile a Twitter utilizzando il tema P2 di WordPress

• WordPress Jetpack: cos'è e vale la pena installarlo?

• Recensione del libro: costruisci il tuo sito web: una guida a fumetti per HTML, CSS e Wordpress

• I 3 migliori plugin SEO per WordPress