{"id":29123,"date":"2019-11-05T14:04:30","date_gmt":"2019-11-05T22:04:30","guid":{"rendered":"https:\/\/kinsta.com\/?p=55983"},"modified":"2025-09-01T16:40:43","modified_gmt":"2025-09-01T15:40:43","slug":"come-cambiare-i-font-in-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/","title":{"rendered":"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)"},"content":{"rendered":"<p>I font possono fare la differenza tra un sito web noioso e uno bello da vedere. Imparando a cambiare <a href=\"https:\/\/kinsta.com\/it\/blog\/font-wordpress\/\">font in WordPress<\/a>, potete rendere il vostro sito moderno, professionale e di marca.<\/p>\n<p>Ma qual \u00e8 il modo migliore per utilizzare i <a href=\"https:\/\/kinsta.com\/it\/blog\/font-wordpress\/\">font nel vostro sito WordPress<\/a>, e come scegliere i font giusti per il vostro design?<\/p>\n<p>In questa guida, vi mostrer\u00f2 tutto quello che c&#8217;\u00e8 da sapere sui font in WordPress. Ecco cosa imparerete:<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2 id=\"terminology\">Font: la Terminologia<\/h2>\n<p>Cominciamo osservando la terminologia riguardante i font sul web.<\/p>\n<ul>\n<li>I web font (<a href=\"https:\/\/kinsta.com\/it\/blog\/font-html\/\">font HTML<\/a>) sono font ospitati su un sito web di terze parti e collegati al vostro sito.<\/li>\n<li><a href=\"https:\/\/kinsta.com\/blog\/local-fonts\/\">I font ospitati localmente<\/a> si descrivono da soli (e sono ospitati sui server del vostro sito web.)<\/li>\n<li>I <a href=\"https:\/\/kinsta.com\/it\/blog\/font-web-safe\/\">web font -safe<\/a> sono una gamma limitata di font preinstallati su (quasi) tutti i computer e ai quali potete essere sicuri che tutti i vostri visitatori avranno accesso.<\/li>\n<\/ul>\n<p>Diamo un&#8217;occhiata alle opzioni per aggiungere font al vostro sito web.<\/p>\n<h2 id=\"options\">Come Aggiungere Font al Vostro Sito WordPress (le Opzioni)<\/h2>\n<p>Prima di aggiungere font al vostro sito, \u00e8 utile capire le opzioni a vostra disposizione.<\/p>\n<p>I font fanno parte del design del vostro sito, quindi, nella maggior parte dei casi, saranno codificati tramite il vostro tema, ma non sempre. In alcuni casi, si potrebbe decidere di utilizzare un plugin per abilitare una gamma pi\u00f9 ampia di font nel proprio sito.<\/p>\n<p>Ecco alcune delle opzioni disponibili:<\/p>\n<ul>\n<li>Utilizzare web font come <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-google-fonts\/\">Google Fonts<\/a> installando un plugin che vi d\u00e0 accesso.<\/li>\n<li>Usare i web font codificandoli nel tema e accodandoli (non \u00e8 cos\u00ec complicato come sembra).<\/li>\n<li>Ospitare i vostri font sul vostro sito e aggiungerli al <a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-un-tema-wordpress\/\">vostro tema<\/a>.<\/li>\n<\/ul>\n<p>Ci sono due distinzioni principali: se si utilizzano web font, che sono ospitati al di fuori del sito, o se si sceglie di ospitare i file di font da soli. In questa guida, esamineremo i pro e i contro di entrambe le opzioni.<\/p>\n<p>Cominciamo a guardare i web font: perch\u00e9 sceglierete di utilizzarli e i modi per aggiungerli al vostro sito.<\/p>\n<h2 id=\"webfonts\">Utilizzo dei Web Font in WordPress<\/h2>\n<p>I web font sono il modo pi\u00f9 popolare per aggiungere font al vostro sito web perch\u00e9 facilitano l\u2019aggiunta di una vasta gamma di font.<\/p>\n<h3>Cosa Sono i Web Font?<\/h3>\n<p>I web font sono font ospitati sul sito web di un fornitore terzo. Invece di copiare i file sul vostro sito, vi collegate al sito web del provider e da l\u00ec vengono estratti.<\/p>\n<p>Questo significa che si ha accesso a una vasta gamma di font senza dover utilizzare lo spazio server sul proprio hosting. Significa anche che, se i file di font dovessero cambiare nel tempo, non sar\u00e0 necessario aggiornare i file e avrete automaticamente accesso alle nuove versioni dei file dal provider.<\/p>\n<p>I web font possono essere gratuiti o a pagamento, di solito tramite abbonamento. Alcuni fornitori popolari sono:<\/p>\n<ul>\n<li><a href=\"https:\/\/fonts.google.com\/\">Google Fonts<\/a>. Il pi\u00f9 grande fornitore di web font gratuiti: potete anche scaricare tutti i loro font sul vostro computer, il che significa che se volete creare materiali offline usando gli stessi font del vostro sito web, potete farlo. Ed \u00e8 tutto gratis.<\/li>\n<li><a href=\"https:\/\/edgewebfonts.adobe.com\/\">Adobe Edge Web Fonts<\/a>. Anche questi sono gratuiti. Mentre sono progettati per essere utilizzati con i prodotti Adobe, funzionano bene su qualsiasi sito web.<\/li>\n<li><a href=\"https:\/\/www.fonts.com\/browse\">Fonts.com<\/a> \u00e8 un fornitore premium di font, che potrebbe essere necessario utilizzare se dovete abbinare il web font al font di materiale stampato e questo non \u00e8 disponibile tramite un fornitore gratuito.<\/li>\n<li><a href=\"https:\/\/www.fontfabric.com\/fonts\/\">fontfabric<\/a> \u00e8 un font designer che fornisce font premium da utilizzare come web font e online. Questi sono a pagamento, ma otterrete qualcosa di pi\u00f9 personalizzato rispetto ai Google Fonts.<\/li>\n<\/ul>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/09\/google-fonts.jpg\" alt=\"Google Fonts\" width=\"1500\" height=\"849\"><figcaption class=\"wp-caption-text\">Google Fonts<\/figcaption><\/figure>\n<p>Tutti questi fornitori vi permettono di servire i font direttamente dai loro server aggiungendo del codice al <a href=\"https:\/\/kinsta.com\/it\/blog\/costo-sito-wordpress\/\">vostro sito WordPress<\/a> o, a volte, <a href=\"https:\/\/kinsta.com\/it\/i-migliori-plugin-di-wordpress\/\">utilizzando un plugin<\/a>, il che significa che non dovete aggiungere alcun codice.<\/p>\n<p>I web font sono diversi dai web-safe fonts. Potete usarli come fallback per i web font solo nel caso in cui il visitatore del vostro sito web non possa connettersi al web font per qualche motivo. Pi\u00f9 avanti vi mostrer\u00f2 come fare.<\/p>\n<h3>Perch\u00e9 Usare i Web Font?<\/h3>\n<p>Quindi, ora che sapete cosa sono i web font, perch\u00e9 dovreste scegliere di usarli invece di ospitare i vostri font?<\/p>\n<p>Ecco alcuni dei benefici:<\/p>\n<ul>\n<li>Facilit\u00e0: aggiungere alcune righe di codice o installare un plugin \u00e8 pi\u00f9 veloce che scaricare e caricare i file dei font. Rende anche pi\u00f9 facile cambiare i font se decidete di farlo in futuro.<\/li>\n<li>Gamma di font: ci sono migliaia di font disponibili come web font e l&#8217;elenco \u00e8 in continua crescita.<\/li>\n<li>Aggiornamenti: Se il file di font ha bisogno di essere aggiornato, magari per aggiungere font variabili (ne parliamo a breve) o per aggiungere font extra, il vostro sito avr\u00e0 accesso alla nuova versione senza che voi dobbiate fare nulla.<\/li>\n<\/ul>\n<p>La maggior parte dei siti web utilizza web font, con un web-safe font di backup. E con WordPress \u00e8 molto facile da fare.<\/p>\n<h3>Trovare i Migliori Web Font per il Vostro Sito<\/h3>\n<p>Avendo deciso di utilizzare web font, ora avete una decisione difficile: quali font utilizzare?<\/p>\n<p>Durante i bei tempi in cui tutti gli sviluppatori web avevano accesso ai font preinstallati e sicuri per il web, questa era una decisione molto semplice. Volevate usare un font serif o sans-serif? (I font Serif hanno, in ogni carattere, una piccola linea o un tratto alla fine di un tratto pi\u00f9 grande, mentre i font sans-serif no.) Una volta presa questa decisione, le vostre scelte erano molto limitate.<\/p>\n<p>Ma ora avete di che sbizzarrirvi.<\/p>\n<p>Ecco alcuni suggerimenti per aiutarvi a scegliere il font migliore per il vostro sito:<\/p>\n<ul>\n<li>Guardate il vostro materiale stampato. State gi\u00e0 usando font che si possono trovare come web font? In caso contrario, potete trovare qualcosa di simile?<\/li>\n<li>Guardate i siti web dei vostri concorrenti. Che tipo di font stanno usando? Non vi consiglio di copiarli, ma ci possono essere alcuni stili che trasmettono il giusto tipo di immagine agli utenti del vostro sito web.<\/li>\n<li>Pensate a che tipo di sensazioni volete trasmettere con i vostri font. Alcuni sembrano pi\u00f9 moderni, altri pi\u00f9 tradizionali. Alcuni sono divertenti, altri pi\u00f9 seri.<\/li>\n<li>Attenetevi ai <a href=\"https:\/\/kinsta.com\/it\/impara\/consigli-blogging\/#give-readers-your-very-best\">font che sono facili da leggere<\/a> per il corpo del testo e, se volete, usate font pi\u00f9 interessanti per i titoli.<\/li>\n<li>Scegliete tra <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-google-fonts\/\">i pi\u00f9 popolari font di Google<\/a> &#8211; questi risulteranno familiari ai visitatori del sito web e sono facili da leggere.<\/li>\n<\/ul>\n<p>Una volta scelti i font, fate qualche test. I fornitori di font come Google Fonts consentono di digitare testo personalizzato per vedere come appare nel font scelto. Una volta che vedete il vostro testo con il font scelto, potreste pi\u00f9 facilmente capire se quello \u00e8 il font giusto per voi.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/sperimentare-con-tuo-font-1.jpg\" alt=\"Fate test con il vostro font\" width=\"1500\" height=\"369\" data-wp-editing=\"1\"><figcaption class=\"wp-caption-text\">Fate test con il vostro font<\/figcaption><\/figure>\n<p>E ricordate: usare web font rende molto facile cambiare i font in modo da poter sempre passare ad un&#8217;altra opzione mentre state <a href=\"https:\/\/kinsta.com\/it\/blog\/assumere-uno-sviluppatore-wordpress\/\">sviluppando il tema<\/a> o impostando il sito.<\/p>\n<h3>Come Aggiungere i Web Font con un Plugin WordPress<\/h3>\n<p>Ora che avete scelto il vostro font, \u00e8 il momento di aggiungerlo al vostro sito.<\/p>\n<p>Se non vi sentite a vostro agio nell&#8217;aggiungere codice ai file del tema, potete installare un plugin che vi permetter\u00e0 di accedere a Google Fonts e utilizzare qualsiasi font che volete sul vostro sito.<\/p>\n<p>Il plugin <a href=\"https:\/\/wordpress.org\/plugins\/olympus-google-fonts\/\">Google Fonts Typography<\/a> vi d\u00e0 accesso all&#8217;intera libreria di font di Google e vi permette di esaminarli tramite il WordPress Customizer.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-i-plugin-di-wordpress\/\">Installate il plugin<\/a> sul vostro sito proprio come qualsiasi altro plugin, e poi attivatelo.<\/p>\n<p>Andate su <strong> Appearance &gt; Customize<\/strong> per accedere al Customizer. Vedrete una sezione chiamata <strong>Google Fonts<\/strong>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/google-fonts-personalizzatore-1.jpg\" alt=\"Google Fonts nel Customizer\" width=\"1500\" height=\"804\"><figcaption class=\"wp-caption-text\">Google Fonts nel Customizer<\/figcaption><\/figure>\n<p>Fate clic su quel link per accedere alle impostazioni dei vostri font. Configurate come segue:<\/p>\n<p><strong>Impostazioni di base<\/strong>: configurate il font predefinito per il corpo del testo, per le intestazioni, e per i pulsanti. Nello screenshot qui sotto potete vedere che ho aggiunto un font serif di facile lettura per il corpo e un font pi\u00f9 distintivo per le intestazioni.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/configurazione-impostazioni-base.jpg\" alt=\"Configurazione delle impostazioni di base\" width=\"1500\" height=\"708\"><figcaption class=\"wp-caption-text\">Configurazione delle impostazioni di base<\/figcaption><\/figure>\n<p><strong>Impostazioni avanzate<\/strong>: qui \u00e8 possibile configurare il branding (titolo e descrizione del sito), la navigazione (il menu), i contenuti e le intestazioni in dettaglio, la barra laterale e il footer. Potete anche caricare font senza assegnarli a nessun elemento, il che significa che potete <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/\">aggiungerli a qualsiasi CSS personalizzato<\/a> nel Customizer.<\/p>\n<p><strong>Caricamento dei font<\/strong>: se ci sono dei font weight di cui non avete bisogno (ad esempio, grassetto, corsivo, etc.), potete deselezionarli qui in modo che non rallentino inutilmente il vostro sito.<\/p>\n<p><strong>Debug<\/strong>: utilizzate questa opzione per forzare la visualizzazione di qualsiasi font, se non funziona come dovrebbe.<\/p>\n<p>Investite un po\u2019 di tempo per lavorare con queste impostazioni e testarle nel Customizer per assicurarvi che funzionino nel modo desiderato. Poi, quando siete soddisfatti delle vostre impostazioni, fate clic sul pulsante <strong>Publish<\/strong>. Non uscite dal Customizer senza far clic su <strong>Publish<\/strong>, o perderete le vostre modifiche.<\/p>\n<h4>Modifica dei Colori dei Font<\/h4>\n<p>La versione gratuita del plugin non consente di modificare i colori dei font. Per farlo, dovrete acquistare la versione premium o utilizzare l&#8217;opzione <strong>CSS aggiuntivo<\/strong> nel Customizer.<\/p>\n<p>Tornate alla schermata iniziale del Customizer e fate clic sulla scheda <strong>CSS aggiuntivo<\/strong>. Vedrete un&#8217;area di testo vuota dove potrete <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-css\/\">aggiungere i vostri CSS<\/a>.<\/p>\n<p>Per trovare l&#8217;elemento di cui avete bisogno per lo stile, selezionatelo e <a href=\"https:\/\/www.lifewire.com\/get-inspect-element-tool-for-browser-756549\">usate l&#8217;ispettore di codice<\/a> nel vostro browser per scoprire quale stile di colore \u00e8 gi\u00e0 presente.<\/p>\n<p>Qui sotto sto usando Google Chrome e sto ispezionando un elemento <code>h1<\/code>.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/ispezionare-codice-chrome-1.jpg\" alt=\"Ispezionare il codice in Chrome\" width=\"1500\" height=\"774\"><figcaption class=\"wp-caption-text\">Ispezionare il codice in Chrome<\/figcaption><\/figure>\n<p>Nel mio <a href=\"https:\/\/kinsta.com\/it\/blog\/cambiare-tema-wordpress\/\">tema WordPress<\/a>, il colore \u00e8 ereditato da quello del body. Voglio aggiungere qualcosa di pi\u00f9 specifico. Nell&#8217;area di testo del vostro CSS, inserite i CSS per il vostro elemento e il colore che volete usare.<br \/>\nIl mio assomiglia a questo:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #f542f5;\n}<\/code><\/pre>\n<p>Cos\u00ec ottengo un H1 rosa brillante:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/modifica-colore-intestazione-1-1.jpg\" alt=\"Modifica del colore dell'intestazione\" width=\"1500\" height=\"781\"><figcaption class=\"wp-caption-text\">Modifica del colore dell&#8217;intestazione<\/figcaption><\/figure>\n<p>Potete ripetere l&#8217;operazione con tutti gli elementi di testo a cui desiderate aggiungere il colore, e anche a tutti i font personalizzati che non sono stati inclusi nelle opzioni delle altre schermate. Se volete sapere quali CSS utilizzare per i font, leggete il paragrafo di questo post dedicato alla modifica dei vostri font tramite CSS.<\/p>\n<h3>Come Aggiungere Manualmente i Web Font<\/h3>\n<p>Se non volete aggiungere un plugin extra al vostro sito e avete accesso al codice del vostro tema, potete installare e utilizzare i web font <a href=\"https:\/\/kinsta.com\/it\/blog\/modificare-codice-wordpress\/\">aggiungendo del codice al vostro file functions e al vostro foglio di stile<\/a>.<\/p>\n<p>Se il vostro sito utilizza un tema personalizzato che potete modificare, allora potete mettere mano al file delle funzioni e al foglio di stile dal vostro tema. Ma se utilizzate un tema di terze parti che avete <a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-un-tema-wordpress\/\">acquistato o scaricato dalla directory dei temi WordPress<\/a>, allora avrete bisogno di <a href=\"https:\/\/kinsta.com\/it\/blog\/child-theme-wordpress\/\">creare un child theme<\/a>. Avrete quindi bisogno di due file: <strong>functions.php<\/strong> e <strong>style.css<\/strong>.<\/p>\n<p>Vediamo come aggiungere manualmente i web font al vostro tema. Per questo esempio lavorer\u00f2 con Google Font, in quanto questo \u00e8 il pi\u00f9 comunemente usato ed \u00e8 gratuito.<\/p>\n<h4>Scegliere un Font e Copiare il Link<\/h4>\n<p>Iniziate scegliendo il vostro font da Google Fonts. Aggiungetelo alla vostra libreria facendo clic sull&#8217;icona pi\u00f9 accanto ad esso.<\/p>\n<p>Fate clic sulla scheda nella parte inferiore dello schermo della vostra libreria e troverete alcuni codici da aggiungere al vostro sito. Se desiderate aggiungere font weight e stili extra, fate clic sulla scheda <strong>Customize<\/strong> e selezionate quelli desiderati. Poi tornate alla scheda<strong> Embed<\/strong>.<\/p>\n<p>Non copiate il codice tale e quale: lo userete, ma invece di chiamare il font nella sezione &lt;head&gt; dell&#8217;intestazione del vostro sito, accoderete i font. Questo \u00e8 il modo corretto per aggiungerli in WordPress.<\/p>\n<p>Invece, dalla sezione Embed font, copiate solo il link al font.<\/p>\n<p>Quindi, nel mio caso, Google Fonts mi sta dando questo codice:<\/p>\n<pre><code class=\"language-php\">&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Raleway\" rel=\"stylesheet\"&gt;<\/code><\/pre>\n<p>Devo solo copiare questa parte:<\/p>\n<pre><code class=\"language-php\">https:\/\/fonts.googleapis.com\/css?family=Raleway<\/code><\/pre>\n<h4>Accodare i Font<\/h4>\n<p>Aprite il file function del vostro tema e aggiungete quanto segue, sostituendo il link del mio font con il link che Google vi ha dato per il vostro:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>Questa funzione accoda lo stile dai server di Google Fonts. Se in futuro vorrete aggiungere altri font, potete o aggiungere una nuova riga alla funzione oppure inserirla nella stessa riga, in questo modo:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_google_fonts() {\n wp_register_style( 'googleFonts', 'https:\/\/fonts.googleapis.com\/css?family=Merriweather|Raleway');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_google_fonts' );<\/code><\/pre>\n<p>In questo modo potete inserire sia il font Merriweather che il Raleway.<\/p>\n<h4>Aggiungere i Font al Vostro Foglio di Stile<\/h4>\n<p>Il processo che abbiamo visto non far\u00e0 funzionare ancora i font nel vostro sito: dovete ancora aggiungerli al foglio di stile del vostro tema.<\/p>\n<p>Aprite il file <strong>style.css<\/strong> del tema e aggiungete il codice per dare uno stile ai singoli elementi con i vostri web font. Assicuratevi di <a href=\"https:\/\/kinsta.com\/it\/blog\/combinare-css-esterni\/\">aggiungerlo dopo qualsiasi CSS esistente<\/a> per i font, o potrebbe essere sovrascritto.<\/p>\n<p>Gli elementi ai quali aggiungere uno stile li sceglierete voi; di solito \u00e8 preferibile usare un font leggibile per il corpo del testo e qualcosa di pi\u00f9 originale per le intestazioni.<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', serif;\n}<\/code><\/pre>\n<p>Nel caso qui sopra, tutti gli elementi di testo nella pagina useranno il font Raleway, ad eccezione degli elementi h1, h2 e h3, che useranno Merriweather.<\/p>\n<p>Ora, salvate il foglio di stile e controllate il vostro sito per assicurarvi che tutto funzioni come previsto. Se i nuovi font non vengono visualizzati, provate a <a href=\"https:\/\/kinsta.com\/it\/blog\/come-svuotare-la-cache-del-browser\/\">cancellare la cache del browser<\/a> e controllare che i font non siano sovrascritti dallo stile di qualche font pi\u00f9 in basso nel foglio di stile. Questo \u00e8 il motivo per cui \u00e8 una buona idea aggiungere il nuovo stile in fondo al foglio di stile o sostituire lo stile del font esistente con il nuovo (ancora meglio).<\/p>\n<h4>Aggiungere i Font di Backup<\/h4>\n<p>Pu\u00f2 capitare che qualcuno visiti il vostro sito e, per qualche motivo, non riesca ad accedere ai web font. Forse si trovano su una connessione scadente o usano un vecchio dispositivo che non rende i web font. O forse il vostro fornitore di web font sta avendo dei problemi tecnici.<\/p>\n<p>Per questo motivo, \u00e8 una buona idea avere sempre un backup.<\/p>\n<p>Il codice che vi viene fornito dai font di Google include gi\u00e0 un backup di <code>serif<\/code> e <code>sans-serif<\/code>, ma possiamo fare un passo avanti.<\/p>\n<p>Utilizzate uno dei font web-ready che saranno gi\u00e0 installati sul computer di chi vi visita, e poi includete il secondo fallback di <code>serif<\/code> o <code>sans-serif<\/code>, nel caso in cui stiano utilizzando un dispositivo mobile che non supporta nemmeno i font web-ready.<\/p>\n<p>Tornate al vostro foglio di stile e modificate il vostro CSS in questo modo:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>Questo significa che le persone che visitano il vostro sito vedranno i vostri web font se tutto va bene; ma se non va bene, vedranno Helvetica o Georgia, o in mancanza, qualsiasi altro font serif e sans-serif che il loro browser \u00e8 in grado di caricare.<\/p>\n<h2 id=\"host\">Ospitare i Vostri Font in WordPress<\/h2>\n<p>Alcuni sviluppatori preferiscono non usare web font, ma ospitare i font sui propri server e voi potresti essere uno di loro.<\/p>\n<p>Ci sono vari motivi per fare questa scelta, tra cui la <a href=\"https:\/\/kinsta.com\/it\/blog\/wordpress-e-sicurezza\/\">sicurezza<\/a>, le <a href=\"https:\/\/kinsta.com\/blog\/wordpress-performance-plugins\/\">prestazioni<\/a> o il budget.<\/p>\n<p>Se vi preoccupano le prestazioni, potete ottimizzare le prestazioni dei vostri web font in diversi modi, come vedremo pi\u00f9 avanti in questo post. Ma se avete deciso di ospitare tutto in locale, dovete sapere come fare.<\/p>\n<h3>Perch\u00e9 Ospitare i Font?<\/h3>\n<p>L&#8217;uso dei web font \u00e8 spesso pi\u00f9 facile e pu\u00f2 darvi maggiore flessibilit\u00e0 e occupare meno spazio sul vostro server. Ma questo non significa che non ci siano occasioni in cui l&#8217;<a href=\"https:\/\/kinsta.com\/blog\/local-fonts\/\">hosting locale dei font<\/a> potrebbe essere pi\u00f9 appropriato.<\/p>\n<p>Fra ragioni per cui potreste voler ospitare i font a livello locale:<\/p>\n<ul>\n<li>Potreste preferire non attingere a risorse di fornitori terzi per motivi di sicurezza, cos\u00ec potete davvero essere gli unici a controllare la sicurezza del vostro sito.<\/li>\n<li>Potreste scoprire che l&#8217;utilizzo di un <a href=\"https:\/\/kinsta.com\/blog\/third-party-performance\/\">servizio di terze parti ha un impatto sulle prestazioni del vostro sito<\/a>.<\/li>\n<li>Potreste aver comprato font e ora volete usarlo. Assicuratevi che la vostra licenza includa l&#8217;uso per siti web e materiale stampato.<\/li>\n<li>Il vostro sito potrebbe essere ospitato localmente, ad esempio su una intranet, e gli utenti non avranno accesso ai web font quando lo utilizzano.<\/li>\n<\/ul>\n<h3>Dove Trovare i Font da Ospitare Localmente<\/h3>\n<p>Molti web font possono anche essere scaricati per essere utilizzati come font ospitati localmente, ma dovrete controllare che ci\u00f2 sia permesso dalla licenza. Nel caso di Google Fonts, \u00e8 consentito.<\/p>\n<p>Troverete anche dei font non disponibili come web font che potete scaricare e ospitare voi stessi. Qualsiasi file di font che potete scaricare sul vostro computer pu\u00f2 anche essere caricato sul vostro sito web e memorizzato l\u00ec. Se per il <a href=\"https:\/\/kinsta.com\/it\/blog\/esempi-siti-wordpress\/\">branding<\/a> del vostro sito avete bisogno di utilizzare un font che non \u00e8 disponibile come web font, scegliete questa soluzione, ma assicuratevi che la licenza lo permetta.<\/p>\n<h3>Come Aggiungere Caratteri Ospitati Localmente al Vostro Sito WordPress<\/h3>\n<p>Ora che sapete che volete ospitare i vostri font localmente, come fate a configurarli?<\/p>\n<p>Il processo \u00e8 diverso dall&#8217;uso dei web font. Dovete <a href=\"https:\/\/kinsta.com\/it\/blog\/aumentare-dimensione-massima-caricamento-wordpress\/\">caricare i file<\/a> di font sul vostro sito e collegarvi ad essi nel vostro foglio di stile senza doverli inserire nel vostro file functions.<\/p>\n<h4>Scaricate e Convertite i Font<\/h4>\n<p>Iniziate scaricando i font che desiderate utilizzare. In Google Fonts, \u00e8 possibile farlo cliccando sull&#8217;icona di download quando si visualizza il font nella propria libreria.<\/p>\n<figure id=\"attachment_56119\" aria-describedby=\"caption-attachment-56119\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56119 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/ scaricare-font-google-fonts-1.jpg\" alt=\" Scaricare font da Google Fonts\" width=\"1500\" height=\"790\"><figcaption id=\"caption-attachment-56119\" class=\"wp-caption-text\">Scaricare font da Google Fonts<\/figcaption><\/figure>\n<p>Decomprimete il file del font sul vostro computer e cancellate i font weight che non sono necessari per il vostro sito: non ha senso caricare file che non utilizzerete.<\/p>\n<p>Per poter essere utilizzati sul vostro sito web, i file dovranno essere in formato . woff. Se non lo sono (e non lo saranno, se li ottenete dai font di Google), potete usare un servizio come <a href=\"https:\/\/convertio.co\/ttf-woff\/\">Convertio<\/a> per convertirli.<\/p>\n<h4>Caricate i Font sul Vostro Tema<\/h4>\n<p>Ora caricate il file del font sul <a href=\"https:\/\/kinsta.com\/blog\/wordpress-free-vs-paid-themes\/\">vostro tema<\/a>, in <strong>wp-content\/themes\/themename<\/strong>, dove <strong>themename<\/strong> \u00e8 la cartella del vostro tema. \u00c8 una buona idea salvare ogni file di font in una cartella dedicata del tema, per esempio in una cartella <strong>font<\/strong>.<\/p>\n<p>Se state lavorando con un tema di terzi, <a href=\"https:\/\/kinsta.com\/it\/blog\/child-theme-wordpress\/\">create un child theme<\/a> per i vostri font e il vostro foglio di stile.<\/p>\n<p>Una volta fatto questo, aggiungete il font al foglio di stile.<\/p>\n<h4>Aggiungere i Font in CSS<\/h4>\n<p>Aprite il foglio di stile del tema.<\/p>\n<p>Aggiungete un codice come questo, sostituendo i font che ho usato con i vostri:<\/p>\n<pre><code class=\"language-css\">@font-face {\n font-family: \u2018Raleway';\n src: url( \u201cfonts\/Raleway-Medium.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: \u2018Raleway';\n src: url( \u201cfonts\/Raleway-Bold.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\n font-weight: bold;\n font-style: normal;\n}\n\n@font-face {\n font-family: \u2018Merriweather';\n src: url( \u201cfonts\/Merriweather.ttf\u201d) format(\u2018woff\u2019); \/* medium *\/\n font-weight: normal;\n font-style: normal;\n}<\/code><\/pre>\n<p>Aggiungete tutto quello che vi serve. Notate che se volete usare le variazioni di grassetto, corsivo, ecc. del vostro font, dovete dichiararle una per una usando <code>@fontface<\/code> e poi <a href=\"https:\/\/css-tricks.com\/whats-deal-declaring-font-properties-font-face\/\">specificare lo stile per ciascuna variazione<\/a>, come ho fatto sopra con Raleway per lo stile grassetto e normale.<\/p>\n<p>Ora aggiungete lo stile per i vostri elementi, come fareste se usaste i web font:<\/p>\n<pre><code class=\"language-css\">body {\n font-family: 'Raleway', Helvetica, sans-serif;\n src: url( \u201c\/fonts\/Raleway-Medium.ttf\u201d );\n}\n\nh1, h2, h3 {\n font-family: 'Merriweather', Georgia, serif;\n}<\/code><\/pre>\n<p>I font ospitati localmente ora funzionano con il vostro tema.<\/p>\n<h2 id=\"change\">Come Cambiare i Font in WordPress<\/h2>\n<p>Ora sapete come installare i font nel vostro sito WordPress in uno dei due modi. Che ne dite di modificarli? E se li cambiassimo?<\/p>\n<p>\u00c8 possibile modificare i font in uno dei tre modi seguenti: tramite il Customizer, nella schermata di modifica dei post o della pagina, o utilizzando i CSS.<\/p>\n<p>Vediamo ognuna di queste opzioni per cambiare lo stile, il colore e la dimensione del font.<\/p>\n<h3>Come Cambiare gli Stili del Font in WordPress<\/h3>\n<p>Vediamo come possiamo farlo sia che stiate usando il Block Editor o il Classic Editor.<\/p>\n<h4>Cambiare gli Stili di Font nel Block Editor (Gutenberg)<\/h4>\n<p>Se state usando una versione recente di WordPress con l&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/gutenberg-editor-wordpress\/\">editor Gutenberg<\/a>, potete cambiare lo stile del vostro testo quando lo modificate nel vostro post o pagina.<\/p>\n<p>Selezionate il blocco che desiderate modificare e sopra di esso apparir\u00e0 un menu di stile.<\/p>\n<figure id=\"attachment_56120\" aria-describedby=\"caption-attachment-56120\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56120 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/gutenberg-blocco-stile-1.jpg\" alt=\"Stile del blocco su Gutenberg\" width=\"1500\" height=\"567\"><figcaption id=\"caption-attachment-56120\" class=\"wp-caption-text\">Stile del blocco su Gutenberg<\/figcaption><\/figure>\n<p>Selezionate il testo che volete modificare e quindi fate clic sulle icone per renderlo in grassetto o in corsivo. Facendo clic sulla freccia accanto alle icone, vedrete che \u00e8 possibile selezionare anche lo stile barrato.<\/p>\n<figure id=\"attachment_56500\" aria-describedby=\"caption-attachment-56500\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56500 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/barrato-gutenberg-1.jpg\" alt=\"Stile barrato su Gutenberg\" width=\"1500\" height=\"639\"><figcaption id=\"caption-attachment-56500\" class=\"wp-caption-text\">Stile barrato su Gutenberg<\/figcaption><\/figure>\n<h4>Modifica Degli Stili dei Font nell&#8217;Editor Classico<\/h4>\n<p>Se state usando una versione precedente di WordPress o avete installato il plugin <a href=\"https:\/\/en-gb.wordpress.org\/plugins\/classic-editor\/\">Classic Editor<\/a>, potete anche modificare gli stili dei font. (Se non volete l&#8217;editor di Gutenberg, \u00e8 meglio <a href=\"https:\/\/kinsta.com\/it\/docs\/supporto\/ambito-del-supporto\/ambito-del-supporto-wordpress-gestito\/\">aggiornare WordPress<\/a> e <a href=\"https:\/\/kinsta.com\/it\/blog\/disabilitare-editor-wordpress-gutenberg\/\">disabilitare Gutenberg<\/a>).<\/p>\n<p>Il Classic Editor include una barra degli strumenti sopra il riquadro di modifica principale dove potete modificare gli stili del testo. Se fate clic sull&#8217;icona Toggle della barra degli strumenti a destra, \u00e8 possibile accedere ad altre opzioni, tra cui lo stile barrato (strikethrough).<\/p>\n<figure id=\"attachment_56501\" aria-describedby=\"caption-attachment-56501\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56501 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/ barra-degli-strumenti-editor-classico-1.jpg\" alt=\" Barra degli strumenti per il Classic Editor\" width=\"1500\" height=\"727\"><figcaption id=\"caption-attachment-56501\" class=\"wp-caption-text\">Barra degli strumenti per il Classic Editor<\/figcaption><\/figure>\n<h4>Modifica Degli Stili dei Font nel Customizer<\/h4>\n<p>Se desiderate modificare lo stile del font per un elemento specifico, potete farlo aggiungendo i CSS manuali al Customizer.<\/p>\n<p>Aprite il Customizer e fate clic su <strong>Additional CSS<\/strong>. Si aprir\u00e0 una schermata in cui dovrete digitare il CSS.<\/p>\n<figure id=\"attachment_56502\" aria-describedby=\"caption-attachment-56502\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56502 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/css-aggiuntivi-customizer-1.jpg\" alt=\"CSS aggiuntivi nel Customizer\" width=\"1500\" height=\"879\"><figcaption id=\"caption-attachment-56502\" class=\"wp-caption-text\">CSS aggiuntivi nel Customizer<\/figcaption><\/figure>\n<p>Ora potete digitare nel box il CSS per i vostri font. Se voleste convertire tutti gli elementi h1 e h2 al corsivo, dovreste aggiungere questo CSS:<\/p>\n<pre><code class=\"language-css\">h1, h2 {\n font-style: italics;\n}<\/code><\/pre>\n<h4>Modifica Degli Stili del Font nel Foglio di Stile<\/h4>\n<p>Se non avete problemi a inserire del codice nel vostro foglio di stile, questo metodo \u00e8 per voi.<\/p>\n<p>Se utilizzate un tema di terze parti, <a href=\"https:\/\/kinsta.com\/it\/blog\/child-theme-wordpress\/\">create un child theme<\/a> per aggiungere il vostro stile: se non lo fate, qualsiasi modifica apportata andr\u00e0 persa quando aggiornerete il tema. Dovrete creare un foglio di stile nel child theme per dire a WordPress che si tratta, appunto, di un child theme: \u00e8 l\u00ec che inserirete il vostro nuovo stile per i font.<\/p>\n<p>Se state invece usando un tema vostro, potete modificare e modificare i CSS nel vostro foglio di stile. Il file \u00e8 <strong>style.css<\/strong> e lo troverete nella cartella del tema, dentro <strong>wp-content\/themes<\/strong>.<\/p>\n<p>Aggiungete qualsiasi nuovo font styling alla fine del vostro foglio di stile in modo che non venga cancellato quelli gi\u00e0 presenti. O meglio ancora, rimuovete e sovrascrivete qualsiasi font styling esistente, a meno che non vogliate mantenerlo.<\/p>\n<p>Potete cambiare il font weight con la funzione font-weight:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-weight = bold;\n}<\/code><\/pre>\n<p>O cambiare lo stile di un elemento con font-style:<\/p>\n<pre><code class=\"language-css\">span.featured {\n font-style = italic;\n}<\/code><\/pre>\n<p>Potete modificare l&#8217;allineamento con text-alignment:<\/p>\n<pre><code class=\"language-css\">span.featured {\n text-alignment: center;\n}<\/code><\/pre>\n<h3>Come Cambiare i Colori dei Font in WordPress<\/h3>\n<p>Un altra personalizzazione che potreste voler fare \u00e8 cambiare il colore di un certo testo nel vostro sito. Attenzione a non esagerare, per\u00f2: il tema \u00e8 stato progettato con colori che funzionano bene insieme e se aggiungete troppi colori, potrebbe sembrare pacchiano e poco professionale.<\/p>\n<h4>Cambiare i Colori dei Font in Gutenberg<\/h4>\n<p>I blocchi di testo di Gutenberg vi permettono di modificare il colore del testo e lo sfondo. Per farlo, aprite il blocco che desiderate modificare e fate clic sulla scheda <strong>Color Settings<\/strong> nella sezione <strong>Block<\/strong> a destra dello schermo.<\/p>\n<figure id=\"attachment_56124\" aria-describedby=\"caption-attachment-56124\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56124 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/scheda-impostazioni-colore.jpg\" alt=\"La scheda Color Settings (impostazioni colore)\" width=\"1500\" height=\"667\"><figcaption id=\"caption-attachment-56124\" class=\"wp-caption-text\">La scheda Color Settings (impostazioni colore)e<\/figcaption><\/figure>\n<p>Da qui potete modificare il colore di sfondo e il colore del testo per i blocchi di testo.<\/p>\n<figure id=\"attachment_56641\" aria-describedby=\"caption-attachment-56641\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56641 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/ colori-personalizzati-blocco-1.jpg\" alt=\" Colori personalizzati in un blocco\" width=\"1500\" height=\"756\"><figcaption id=\"caption-attachment-56641\" class=\"wp-caption-text\">Colori personalizzati in un blocco<\/figcaption><\/figure>\n<p>Notate che WordPress vi avvertir\u00e0 se la combinazione di colori scelta non \u00e8 idonea in termini di accessibilit\u00e0, come nell&#8217;esempio che ho usato sopra. Evitate la tentazione di strafare con i colori: dopo tutto se avete scelto il tema \u00e8 perch\u00e9 anche i colori del design erano appropriati per il vostro sito; l&#8217;aggiunta di molti altri colori potrebbe scadere sul pacchiano.<\/p>\n<p>Se fate clic sulla scheda <strong>Advanced<\/strong> sotto la scheda <strong>Color Settings<\/strong>, potete anche aggiungere una classe a quel blocco, per poi personalizzarla nel Customizer o nel vostro foglio di stile. Quindi, per esempio, se aggiungete una classe <code>.featured<\/code> al blocco, potreste poi stilizzarlo usando quella classe.<\/p>\n<h4>Modifica dei Colori dei Font nell&#8217;Editor Classico<\/h4>\n<p>La classica barra degli strumenti dell&#8217;editor permette di cambiare il colore del testo selezionato. In questo modo potete selezionare una singola parola e cambiarne il colore. Qui sotto vedete come ho creato una una frase rossa.<\/p>\n<figure id=\"attachment_56642\" aria-describedby=\"caption-attachment-56642\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56642 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/ cambiare-colori-editor-classico-1.jpg\" alt=\"Cambiare i colori nel Classic Editor\" width=\"1500\" height=\"716\"><figcaption id=\"caption-attachment-56642\" class=\"wp-caption-text\">Cambiare i colori nel Classic Editor<\/figcaption><\/figure>\n<p>Mentre questo, in teoria, vi d\u00e0 molta flessibilit\u00e0, fate attenzione a non strafare. Se iniziate ad aggiungere molti pi\u00f9 colori al testo potreste renderne difficile la lettura e peggiorarne l\u2019accessibilit\u00e0.<\/p>\n<h4>Modifica dei Colori dei Font nel Customizer<\/h4>\n<p>Se il vostro tema include opzioni per cambiare la <a href=\"https:\/\/kinsta.com\/it\/blog\/schemi-di-colore-siti-web\/\">combinazione di colori del vostro sito<\/a>, questo \u00e8 il posto migliore per farlo.<\/p>\n<p>Per esempio, nel sito qui sotto sto usando un tema che mi permette di scegliere una nuova combinazione di colori per l&#8217;intero tema. Questo aiuta a garantire che i nuovi colori lavorino bene insieme e siano coerenti.<\/p>\n<figure id=\"attachment_56643\" aria-describedby=\"caption-attachment-56643\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56643 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/modifica-schema-colori-personalizzatore-1-1.jpg\" alt=\"Modifica dello schema di colori nel Customizer\" width=\"1500\" height=\"815\"><figcaption id=\"caption-attachment-56643\" class=\"wp-caption-text\">Modifica dello schema di colori nel Customizer<\/figcaption><\/figure>\n<p>Le opzioni per realizzare questa modifica variano a seconda del tema: alcuni temi vi permettono di cambiare il colore di intestazioni, link e altri elementi.<\/p>\n<p>Se desiderate cambiare il colore di elementi specifici, ma il tema non vi offre l\u2019opzione per farlo, potete aggiungere del CSS nel Customizer.<\/p>\n<p>Selezionate <strong>Customize &gt; Additional CSS<\/strong> e inserite i CSS nella casella di testo.<\/p>\n<p>Per esempio, se volete cambiare il colore delle vostre intestazioni <code>h1<\/code>, digitate quanto segue:<\/p>\n<pre><code class=\"language-css\">h1 {\n color: #564534;\n}<\/code><\/pre>\n<p>Se questo non funziona, potrebbe essere necessario aggiungere del CSS pi\u00f9 specifico. Nel mio tema, il colore per il link all&#8217;intestazione del sito \u00e8 codificato usando l\u2019ID <code>#site-title<\/code>, quindi ho bisogno di aggiungere questo CSS:<\/p>\n<pre><code class=\"language-css\">#site-title a {\n color: #564534;\n}<\/code><\/pre>\n<figure id=\"attachment_56128\" aria-describedby=\"caption-attachment-56128\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56128 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/css-aggiuntivi-colore.jpg\" alt=\"CSS aggiuntivi: colore\" width=\"1500\" height=\"818\"><figcaption id=\"caption-attachment-56128\" class=\"wp-caption-text\">CSS aggiuntivi: colore<\/figcaption><\/figure>\n<p>Sostituite il colore che ho usato sopra con il vostro colore.<\/p>\n<p>Quando siete soddisfatti delle modifiche apportate, fate clic sul pulsante <strong>Publish<\/strong>.<\/p>\n<h4>Modifica dei Colori dei Font nel Foglio di Stile<\/h4>\n<p>Come per gli stili dei font, potete anche modificare il foglio di stile del tema (o creare un child theme) per cambiare i colori dei font.<br \/>\nQui sotto sto cambiando il colore principale per il testo del mio sito, usando l\u2019elemento <code>body<\/code>:<\/p>\n<pre><code class=\"language-css\">body {\n color = #222222;\n}<\/code><\/pre>\n<p>Assicuratevi di sovrascrivere qualsiasi stile gi\u00e0 esistente per gli stessi elementi; ricordate anche degli elementi che ereditano quello stile, se volete che abbiano un colore diverso. Tutto il testo erediter\u00e0 il colore dell\u2019elemento <strong>body<\/strong>, a meno che non abbia il proprio stile.<\/p>\n<h3>Cambiare le Dimensioni dei Font in WordPress<\/h3>\n<p>Per motivi di accessibilit\u00e0, potreste decidere di voler avere caratteri pi\u00f9 grandi di quelli predefiniti nel tema. Oppure potreste decidere che le intestazioni nelle aree del widget sono troppo piccole, per esempio.<\/p>\n<h4>Cambiare la Dimensione dei Font in Gutenberg<\/h4>\n<p>Con l&#8217;editor di Gutenberg \u00e8 possibile modificare le dimensioni del testo all&#8217;interno di ogni blocco.<\/p>\n<p>Selezionate il blocco e quindi fate clic sulla scheda Text Settings nel menu Blocks a destra dello schermo. \u00c8 possibile rendere il testo nel blocco pi\u00f9 piccolo o pi\u00f9 grande, come mostrato di seguito.<\/p>\n<figure id=\"attachment_56129\" aria-describedby=\"caption-attachment-56129\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56129 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/modifica-dimensioni-caratteri-gutenberg.jpg\" alt=\"Modifica delle dimensioni dei font in Gutenberg\" width=\"1500\" height=\"672\"><figcaption id=\"caption-attachment-56129\" class=\"wp-caption-text\">Modifica delle dimensioni dei font in Gutenberg<\/figcaption><\/figure>\n<p>Attenzione a non esagerare: se tutti i paragrafi della pagina sono di dimensioni diverse, il testo apparir\u00e0 disgiunto e difficile da leggere.<\/p>\n<h4>Modifica della Dimensione dei Font nell&#8217;Classic Editor<\/h4>\n<p>Il Classic Editor non vi d\u00e0 la possibilit\u00e0 di selezionare un testo specifico e cambiarne le dimensioni: quindi, se avete bisogno di questa funzione, dovreste passare a Gutenberg!<\/p>\n<h4>Modifica delle Dimensioni dei Font nel Customizer<\/h4>\n<p>A seconda del tema che usate, potete avere un&#8217;opzione per cambiare le dimensioni dei caratteri nel Customizer, sia cambiando la dimensione dei font per l&#8217;intero sito o puntando solo su intestazioni e corpo del testo.<\/p>\n<p>Se il tema non include un&#8217;opzione nel Customizer per modificare le dimensioni dei caratteri, potete utilizzare l&#8217;opzione <strong>Additional CSS<\/strong>. Andate su <strong>Customize &gt; Additional CSS <\/strong>e inserite il CSS nel box.<\/p>\n<p>Ecco come uso il CSS per ingrandire le intestazioni nelle aree dei widget:<\/p>\n<pre><code class=\"language-css\">h2.widget-title {\n\u00a0font-size: 3em;\n}<\/code><\/pre>\n<figure id=\"attachment_56130\" aria-describedby=\"caption-attachment-56130\" style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-56130 size-full\" src=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/10\/dimensione-carattere-stile-css-aggiuntivi.jpg\" alt=\"Modifica della dimensione del font con il CSS aggiuntivo\" width=\"1500\" height=\"816\"><figcaption id=\"caption-attachment-56130\" class=\"wp-caption-text\">Modifica della dimensione del font con il CSS aggiuntivo<\/figcaption><\/figure>\n<p>Forse \u00e8 un po&#8217; troppo grande, ma vi d\u00e0 un\u2019idea generale.<\/p>\n<h4>Modifica della Dimensione dei Font nel Foglio di Stile<\/h4>\n<p>La modifica delle dimensioni dei font nel foglio di stile funziona in modo simile a qualsiasi altro stile per i font.<\/p>\n<p>Se volete cambiare la dimensione di tutto il testo del vostro sito, userete l&#8217;elemento <code>body<\/code>.<\/p>\n<pre><code class=\"language-css\">body {\n font-size: 14px;\n}<\/code><\/pre>\n<p>Per l&#8217;elemento <code>body<\/code> si usano i pixel, ma per gli altri elementi si usa <code>em<\/code> per cui la dimensione \u00e8 relativa alla dimensione dell&#8217;elemento <code>body<\/code>.<\/p>\n<pre><code class=\"language-css\">h1,\n#site-title {\n font-size: 2em;\n}<\/code><\/pre>\n<p>Ricordate che, se avete intenzione di apportare modifiche ai font nel vostro foglio di stile del tema, \u00e8 meglio testarli prima su un <a href=\"https:\/\/kinsta.com\/it\/docs\/hosting-wordpress\/ambienti-di-staging\/\">sito di sviluppo o di staging<\/a> per non correre il rischio di rovinare il vostro sito live.<\/p>\n<h2 id=\"optimize\">Come Ottimizzare i Font in WordPress<\/h2>\n<p>Che stiate usando web font o font ospitati localmente, ha senso fare tutto il possibile per ottimizzarli.<\/p>\n<p>Qui vi dar\u00f2 alcuni suggerimenti per ottimizzare i font, sia per la velocit\u00e0 che per il design.<\/p>\n<h3>Ottimizzazione i Font per Migliorare le Prestazioni<\/h3>\n<p>Se state usando i web font sul vostro sito, dovrete fare tutto il possibile per assicurarvi che vengano mostrati nelle vostre pagine il pi\u00f9 velocemente possibile e che il fatto che siano ospitati altrove non rallenti il caricamento.<\/p>\n<ul>\n<li>Usate il caching per assicurarvi che le pagine non debbano essere ricostruite ogni volta che vengono caricate. I piani di hosting Kinsta sono dotati di <a href=\"https:\/\/kinsta.com\/it\/blog\/la-cache-di-wordpress\/\">cache integrata<\/a>.<\/li>\n<li>Utilizzare un provider di web font che fornisce i font tramite una <a href=\"https:\/\/kinsta.com\/it\/docs\/hosting-wordpress\/wordpress-cdn\/kinsta-cdn\/#kinstas-cdn\">Content Delivery Network<\/a> o CDN. Google Fonts lo fa e questo velocizza il caricamento dei font.<\/li>\n<li>Usate solo i font di cui avete bisogno. Non inserite variazioni di font (font weight, stili) che non verranno utilizzati nel foglio di stile. Se ne avete bisogno in un secondo momento, potrete sempre aggiungerli.<\/li>\n<li>Se utilizzate web font, assicuratevi di accodarli correttamente. Non usate @import nel vostro foglio di stile, anche se questo \u00e8 ci\u00f2 che il vostro web font provider vi dice di fare.<\/li>\n<li>Quando aggiungete manualmente i CSS, fatelo nel foglio di stile del tema e non nella sezione &lt;head&gt; del file header.php. Questa \u00e8 una delle ragioni per cui \u00e8 meglio codificare manualmente i CSS nel tema piuttosto che usare il Customizer o un blocco, visto che entrambi aggiungeranno i CSS in linea nella pagina invece che nel foglio di stile.<\/li>\n<li>Considerate l&#8217;utilizzo dell&#8217;inlining CSS per guadagnare qualche millisecondo in pi\u00f9 rispetto ai tempi di caricamento della pagina. Questo \u00e8 un processo che usa la codifica base64 per aggiungere CSS dal vostro foglio di stile nella pagina prima del caricamento, cos\u00ec il browser non dovr\u00e0 caricare file extra. Pu\u00f2 sembrare controintuitivo considerato il consiglio precedente di non aggiungere i CSS inline, ma funziona comunque da un file CSS separato e non significa codificare manualmente i CSS inline. Se state caricando pi\u00f9 font, l&#8217;<a href=\"https:\/\/www.bramstein.com\/writing\/web-font-anti-patterns-inlining.html\">inlining pu\u00f2 velocizzare un po&#8217; il vostro sito<\/a>.<\/li>\n<li>Usate la <a href=\"https:\/\/kinsta.com\/it\/blog\/combinare-css-esterni\/#combine-external-css-in-wordpress\">minificazione<\/a> per ridurre la dimensione del vostro foglio di stile. Potete farlo facilmente se siete <a href=\"https:\/\/kinsta.com\/it\/prezzi\/?plan=visits-business1\">clienti Kinsta<\/a> grazie alla <a href=\"https:\/\/kinsta.com\/it\/docs\/hosting-wordpress\/wordpress-cdn\/kinsta-cdn\/#code-minification-1\">funzione di minificazione del codice<\/a> che si trova proprio nel <a href=\"https:\/\/kinsta.com\/it\/mykinsta\/\">cruscotto MyKinsta<\/a>. Questo permette ai clienti di abilitare la minificazione automatica di CSS e JavaScript con un semplice clic, velocizzando i siti senza alcuno sforzo.<\/li>\n<li>Se state ospitando i font localmente, caricate solo i file per i font, i font-weight e gli stili di font di cui avete bisogno. Aggiungete solo le variazioni necessarie usando la dichiarazione @font-face.<\/li>\n<li>Considerate la possibilit\u00e0 di utilizzare un CDN per ospitare i vostri font invece di ospitarli sul vostro server.<\/li>\n<li>Quando ospitate i vostri font, includete formati aggiuntivi: woff2, woff, ttf, ttf e eot. I browser possono cos\u00ec selezionare la versione che verr\u00e0 caricata pi\u00f9 velocemente.<\/li>\n<li>Se state usando un font diverso per il titolo del vostro sito, inserite solo i caratteri di cui avete bisogno al posto dell&#8217;intera libreria di font.<\/li>\n<\/ul>\n<p>Quindi, se il titolo del vostro sito \u00e8 Kinsta, potreste migliorare leggermente le prestazioni in questo modo:<\/p>\n<pre><code class=\"language-php\">function kinsta_add_title_font() {\n wp_register_style( 'googleFonts', \u2018https:\/\/fonts.googleapis.com\/css?family=Raleway&text=\u201ckinsta');\n wp_enqueue_style( 'googleFonts');\n}\nadd_action( 'wp_enqueue_scripts', 'kinsta_add_title_font' );<\/code><\/pre>\n<h3>Ottimizzazione dei Font per il Design<\/h3>\n<p>Oltre ad ottimizzare le prestazioni dei vostri font, ha anche senso assicurarsi che siano visivamente ottimizzati, cio\u00e8 che si adattino bene al design del vostro sito e alle vostre risorse offline.<\/p>\n<p>Questo \u00e8 importante soprattutto se utilizzate un plugin o un child theme per aggiungere font extra oltre a quelli gi\u00e0 inclusi nel tema. C&#8217;\u00e8 il rischio che il vostro tema risulti disordinato, se ci sono troppi font in molteplici colori e stili.<\/p>\n<p>Prima di aggiungere font aggiuntivi al vostro sito, considerate quanto segue:<\/p>\n<ul>\n<li>I nuovi font sono coerenti con i font esistenti? Trasmettono uno stile o uno stato d&#8217;animo simile?<\/li>\n<li>Se avete bisogno di abbinare un font che \u00e8 stato usato per i materiali di stampa, ma non potete usare lo stesso web font, provate a trovare una corrispondenza il pi\u00f9 possibile simile su Google Fonts.<\/li>\n<li>I font che avete scelto sono coerenti con il vostro marchio? Se state gestendo un business professionale, non dovreste usare il Comic Sans (di fatto, qualunque sia la natura del sito web che state gestendo, non dovreste voler usare il Comic Sans).<\/li>\n<li>Se state cambiando i colori dei vostri font, provate a utilizzare colori che sono gi\u00e0 presenti nel design del vostro tema o che si coordinano con essi. L&#8217;aggiunta di troppi colori render\u00e0 il vostro sito pacchiano e poco professionale.<\/li>\n<li>Se state cercando di scegliere un paio di font su Google Fonts, provate a utilizzare un servizio come <a href=\"https:\/\/fontpair.co\/\">fontpair<\/a> per trovarne due che funzionino bene insieme.<\/li>\n<\/ul>\n<p>I font che utilizzate nel design del vostro sito influenzeranno l\u2019impressione che i visitatori avranno quando capiteranno sul vostro sito. Assicuratevi di aver considerato questo aspetto, e di aver scelto dei font che rafforzino il vostro marchio.<\/p>\n<h3>Lavorare con i Font Variabili<\/h3>\n<p><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/typography\/variable-fonts\/\">I font variabili<\/a> sono un nuovo tipo di font che rendono pi\u00f9 efficiente l&#8217;aggiunta di font al vostro sito.<\/p>\n<p>Consentono di memorizzare pi\u00f9 informazioni in un unico file di font, in modo che se vi servono variazioni (grassetto, corsivo, ecc.), non \u00e8 necessario caricare pi\u00f9 file, ma si pu\u00f2 semplicemente caricare un file unico.<\/p>\n<p>Per un font che contiene diversi font weight, stili e inclinazioni, questo potrebbe salvare molto spazio per i file e rendere il processo di accodamento del font o la sua aggiunta tramite @fontface molto pi\u00f9 semplice.<\/p>\n<p>I font variabili sono supportati nelle ultime versioni di Chrome, Edge, Firefox e Safari, ma non nei browser pi\u00f9 vecchi; se li usate, avrete bisogno di un fallback. Oltretutto non ci sono ancora molti font variabili disponibili. Google Fonts non ne include, ma Google supporta le specifiche, quindi \u00e8 probabile che verranno aggiunti con il tempo.<\/p>\n<p>Gli sviluppatori di font stanno lavorando alla <a href=\"https:\/\/www.monotype.com\/resources\/articles\/variable-fonts-making-the-promise-a-reality\/\">creazione di pi\u00f9 font variabili e al miglioramento della loro affidabilit\u00e0<\/a>, quindi vale la pena monitorare i progressi in modo da poter utilizzare font variabili per ottimizzare i font una volta che diventaranno pi\u00f9 stabili.<\/p>\n\n<h2><strong>Riepilogo<\/strong><\/h2>\n<p>Cambiare font sul vostro sito WordPress non \u00e8 un compito semplice. Avete diverse possibilit\u00e0 fra cui scegliere:<\/p>\n<ol>\n<li>Utilizzo di web font tramite un plugin.<\/li>\n<li>Usare i web font inserendoli tramite codice nel vostro tema e accodandoli.<\/li>\n<li>Ospitare i vostri font.<\/li>\n<\/ol>\n<p>Dovreste poi concentrarvi su come ottimizzare i font per ottenere prestazioni migliori. Se seguite i suggerimenti di questa guida, dovreste essere in grado non solo di cambiare i font in WordPress, ma anche di controllarli meglio nel vostro tema.<\/p>\n<p>Volete mettere in ordine la vostra pagina o il layout del blog per far s\u00ec che i vostri lettori si concentrino sul vostro contenuto? Allora date un&#8217;occhiata a questo: <a href=\"https:\/\/kinsta.com\/it\/blog\/rimuovere-la-barra-laterale-wordpress\/\">Come Rimuovere la Barra Laterale in WordPress (4 Metodi)<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I font possono fare la differenza tra un sito web noioso e uno bello da vedere. Imparando a cambiare font in WordPress, potete rendere il vostro &#8230;<\/p>\n","protected":false},"author":105,"featured_media":29143,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[7789,200],"topic":[25878,25943],"class_list":["post-29123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-website","topic-design-sito-wordpress","topic-font-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)<\/title>\n<meta name=\"description\" content=\"Scopri tutto quello che ti serve per cambiare font in WordPress: come cambiare dimensione e colori dei font e come ottimizzarli per avere pagine pi\u00f9 veloci.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)\" \/>\n<meta property=\"og:description\" content=\"Scopri tutto quello che ti serve per cambiare font in WordPress: come cambiare dimensione e colori dei font e come ottimizzarli per avere pagine pi\u00f9 veloci.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-05T22:04:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T15:40:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rachel McCollin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri tutto quello che ti serve per cambiare font in WordPress: come cambiare dimensione e colori dei font e come ottimizzarli per avere pagine pi\u00f9 veloci.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rachel McCollin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/\"},\"author\":{\"name\":\"Rachel McCollin\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\"},\"headline\":\"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)\",\"datePublished\":\"2019-11-05T22:04:30+00:00\",\"dateModified\":\"2025-09-01T15:40:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/\"},\"wordCount\":5910,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg\",\"keywords\":[\"fonts\",\"website\"],\"articleSection\":[\"I Migliori Tutorial su WordPress\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/\",\"name\":\"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg\",\"datePublished\":\"2019-11-05T22:04:30+00:00\",\"dateModified\":\"2025-09-01T15:40:43+00:00\",\"description\":\"Scopri tutto quello che ti serve per cambiare font in WordPress: come cambiare dimensione e colori dei font e come ottimizzarli per avere pagine pi\u00f9 veloci.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Come cambiare caratteri in WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Font per WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/font-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/52eb266d622b565d3206e355caac172e\",\"name\":\"Rachel McCollin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g\",\"caption\":\"Rachel McCollin\"},\"description\":\"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/rachelmccollin\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)","description":"Scopri tutto quello che ti serve per cambiare font in WordPress: come cambiare dimensione e colori dei font e come ottimizzarli per avere pagine pi\u00f9 veloci.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/","og_locale":"it_IT","og_type":"article","og_title":"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)","og_description":"Scopri tutto quello che ti serve per cambiare font in WordPress: come cambiare dimensione e colori dei font e come ottimizzarli per avere pagine pi\u00f9 veloci.","og_url":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2019-11-05T22:04:30+00:00","article_modified_time":"2025-09-01T15:40:43+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg","type":"image\/jpeg"}],"author":"Rachel McCollin","twitter_card":"summary_large_image","twitter_description":"Scopri tutto quello che ti serve per cambiare font in WordPress: come cambiare dimensione e colori dei font e come ottimizzarli per avere pagine pi\u00f9 veloci.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Rachel McCollin","Tempo di lettura stimato":"35 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/"},"author":{"name":"Rachel McCollin","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/52eb266d622b565d3206e355caac172e"},"headline":"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)","datePublished":"2019-11-05T22:04:30+00:00","dateModified":"2025-09-01T15:40:43+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/"},"wordCount":5910,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg","keywords":["fonts","website"],"articleSection":["I Migliori Tutorial su WordPress"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/","url":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/","name":"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg","datePublished":"2019-11-05T22:04:30+00:00","dateModified":"2025-09-01T15:40:43+00:00","description":"Scopri tutto quello che ti serve per cambiare font in WordPress: come cambiare dimensione e colori dei font e come ottimizzarli per avere pagine pi\u00f9 veloci.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2019\/11\/come-cambiare-caratteri-wordpress.jpg","width":1460,"height":730,"caption":"Come cambiare caratteri in WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/come-cambiare-i-font-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Font per WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/font-wordpress\/"},{"@type":"ListItem","position":3,"name":"Come Cambiare i Font in WordPress (+ Cambiare Dimensione e Colore e Ottimizzarli)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/52eb266d622b565d3206e355caac172e","name":"Rachel McCollin","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f99f27294a4a0acb07caa4d0604a1fef?s=96&d=mm&r=g","caption":"Rachel McCollin"},"description":"Rachel McCollin has been helping people build websites with WordPress since 2010. She's a huge fan of self-hosted WordPress and wants to help as many people as possible create an awesome website with it.","url":"https:\/\/kinsta.com\/it\/blog\/author\/rachelmccollin\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/29123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=29123"}],"version-history":[{"count":17,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/29123\/revisions"}],"predecessor-version":[{"id":81797,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/29123\/revisions\/81797"}],"alternate":[{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/translations\/es"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/translations\/fr"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/translations\/en"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/translations\/jp"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/translations\/se"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/29123\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/29143"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=29123"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=29123"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=29123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}