{"id":25849,"date":"2026-07-29T10:00:00","date_gmt":"2026-07-29T08:00:00","guid":{"rendered":"https:\/\/soccorsowp.it\/blog\/?p=25849"},"modified":"2026-07-29T10:00:00","modified_gmt":"2026-07-29T08:00:00","slug":"ottimizzare-font-web-wordpress-prestazioni","status":"publish","type":"post","link":"https:\/\/soccorsowp.it\/blog\/ottimizzare-font-web-wordpress-prestazioni\/","title":{"rendered":"Come ottimizzare i font web in WordPress per migliorare le prestazioni"},"content":{"rendered":"<h1>Come ottimizzare i font web in WordPress per migliorare le prestazioni<\/h1>\n<p>I <strong>font web<\/strong> sono tra le risorse pi\u00f9 pesanti che il browser deve scaricare per renderizzare una pagina. Google Fonts, Adobe Fonts e altri servizi offrono centinaia di font bellissimi, ma ogni font aggiunge richieste HTTP e kilobyte al caricamento. In questa guida ti spiego come ottimizzare i font per migliorare le prestazioni del tuo sito <a href=\"https:\/\/soccorsowp.it\/blog\/blocco-di-contenuti-opt-in-per-wordpress\/\">WordPress<\/a> senza rinunciare alla tipografia.<\/p>\n<h2>Il problema dei font web nelle prestazioni<\/h2>\n<p>Un singolo font web con tutti i pesi (regular, bold, italic, bold italic) e il set di caratteri completo pu\u00f2 pesare <strong>oltre 500 KB<\/strong>. Se usi due font diversi (uno per i titoli e uno per il corpo del testo), il peso raddoppia. Il browser deve scaricare questi file prima di poter mostrare il testo, causando due problemi:<\/p>\n<ul>\n<li><strong>FOIT (Flash of Invisible Text):<\/strong> il testo rimane invisibile finch\u00e9 il font non viene scaricato. L&#8217;utente vede la pagina senza testo per qualche istante.<\/li>\n<li><strong>FOUT (Flash of Unstyled Text):<\/strong> il browser mostra il testo con un font di fallback e poi lo sostituisce quando il font web viene scaricato, causando un fastidioso spostamento del layout.<\/li>\n<\/ul>\n<p>Entrambi i problemi peggiorano il punteggio <strong>Cumulative Layout Shift (CLS)<\/strong> e <strong>Largest Contentful Paint (LCP)<\/strong> nelle Core Web Vitals di Google.<\/p>\n<h2>Ospitare i font localmente<\/h2>\n<p>Invece di caricare i font da Google Fonts o altri CDN esterni, <strong>ospitali sul tuo server<\/strong>. Questo elimina la connessione DNS al server esterno e ti d\u00e0 pieno controllo sulla cache.<\/p>\n<p>Per scaricare i font di Google Fonts in locale:<\/p>\n<ol>\n<li>Vai su <strong>google-webfonts-helper.herokuapp.com<\/strong> e cerca il font che usi.<\/li>\n<li>Seleziona i pesi che ti servono e scarica l&#8217;archivio con i file WOFF2.<\/li>\n<li>Carica i file nella cartella del tuo tema (es. <span style=\"font-family: monospace\">fonts\/<\/span>).<\/li>\n<li>Aggiungi la dichiarazione <span style=\"font-family: monospace\">@font-face<\/span> nel tuo CSS.<\/li>\n<\/ol>\n<p>In WordPress, puoi usare il plugin <strong>OMGF (Optimize My Google Fonts)<\/strong> che automatizza questo processo: scarica i font di Google Fonts, li salva sul tuo server e aggiorna i riferimenti CSS automaticamente.<\/p>\n<h2>Usare solo i pesi necessari<\/h2>\n<p>Molti temi caricano font con 6-8 pesi diversi (thin, light, regular, medium, semibold, bold, extrabold, black) quando ne servono solo 2-3. Ogni peso \u00e8 un file separato da scaricare.<\/p>\n<p><strong>Regola pratica:<\/strong> per la maggior parte dei siti bastano tre pesi:<\/p>\n<ul>\n<li><strong>Regular (400):<\/strong> per il corpo del testo.<\/li>\n<li><strong>Bold (700):<\/strong> per i titoli e il testo in grassetto.<\/li>\n<li><strong>Italic (400i):<\/strong> solo se usi effettivamente il corsivo nel contenuto.<\/li>\n<\/ul>\n<p>Rimuovi i pesi inutilizzati dalle impostazioni del tema o dal codice che carica i font. Ogni peso rimosso pu\u00f2 risparmiare 20-50 KB.<\/p>\n<h2>Usare il formato WOFF2<\/h2>\n<p>Il formato <strong>WOFF2<\/strong> offre la migliore compressione per i font web, circa il 30% pi\u00f9 leggero di WOFF e il 50% pi\u00f9 leggero di TTF. \u00c8 supportato da tutti i browser moderni (oltre il 97% degli utenti). Non servono pi\u00f9 fallback verso WOFF o TTF: usa solo WOFF2.<\/p>\n<pre>@font-face {\n    font-family: 'MioFont';\n    src: url('fonts\/miofont-regular.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n}<\/pre>\n<h2>Usare font-display: swap<\/h2>\n<p>La propriet\u00e0 CSS <span style=\"font-family: monospace\">font-display: swap<\/span> dice al browser di mostrare immediatamente il testo con un font di fallback e poi sostituirlo quando il font web viene scaricato. Questo elimina il FOIT (testo invisibile) e migliora il Largest Contentful Paint.<\/p>\n<p>Se carichi font da Google Fonts, aggiungi il parametro <span style=\"font-family: monospace\">&amp;display=swap<\/span> all&#8217;URL:<\/p>\n<pre>https:\/\/fonts.googleapis.com\/css2?family=Open+Sans:wght@400;700&amp;display=swap<\/pre>\n<p>Per i font locali, aggiungi <span style=\"font-family: monospace\">font-display: swap;<\/span> nella dichiarazione <span style=\"font-family: monospace\">@font-face<\/span> come mostrato nell&#8217;esempio precedente.<\/p>\n<h2>Precaricare i font critici<\/h2>\n<p>Il <strong>preload<\/strong> dice al browser di iniziare a scaricare il font il prima possibile, senza aspettare che il CSS venga analizzato. Aggiungi un tag link preload nell&#8217;<span style=\"font-family: monospace\">&lt;head&gt;<\/span> del tuo sito:<\/p>\n<pre>&lt;link rel=\"preload\" href=\"\/wp-content\/themes\/tuo-tema\/fonts\/miofont-regular.woff2\" as=\"font\" type=\"font\/woff2\" crossorigin&gt;<\/pre>\n<p>L&#8217;attributo <span style=\"font-family: monospace\">crossorigin<\/span> \u00e8 obbligatorio anche per i font locali, perch\u00e9 i font vengono sempre scaricati in modalit\u00e0 CORS. Precarica solo i font critici (quelli usati above the fold), non tutti: precaricare troppi font ha l&#8217;effetto opposto perch\u00e9 satura la banda.<\/p>\n<h2>Ridurre i set di caratteri con il subsetting<\/h2>\n<p>Se il tuo sito \u00e8 in italiano, non hai bisogno dei caratteri cirillici, greci o vietnamiti inclusi nella maggior parte dei font. Il <strong>subsetting<\/strong> rimuove i caratteri non necessari, riducendo drasticamente le dimensioni del file.<\/p>\n<p>Strumenti come <strong>FontSquirrel Generator<\/strong> o <strong>glyphhanger<\/strong> (da riga di comando) possono creare un subset personalizzato del tuo font con solo i caratteri latini, riducendo il peso del 50-70%.<\/p>\n<p>Google Fonts supporta il subsetting automatico: se richiedi il font con il parametro <span style=\"font-family: monospace\">&amp;subset=latin<\/span>, il server restituisce solo i caratteri latini.<\/p>\n<h2>Serve assistenza?<\/h2>\n<p>Se i font rallentano il tuo sito WordPress e vuoi ottimizzarli senza compromettere il design, il team di <strong><a href=\"https:\/\/soccorsowp.it\/blog\/i-migliori-plugin-woocommerce-per-dominare-il-black-friday\/\">SoccorsoWP<\/a><\/strong> pu\u00f2 configurare tutto per te. <a href=\"https:\/\/soccorsowp.it\/ticket\/\">Apri un ticket<\/a> e migliora le prestazioni del tuo sito.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Come ottimizzare i font web in WordPress per migliorare le prestazioni I font web sono tra le risorse pi\u00f9 pesanti che il browser deve scaricare&#8230;<\/p>\n","protected":false},"author":1,"featured_media":25850,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Come ottimizzare i font web in WordPress per migliorare le","_seopress_titles_desc":"I font web rallentano il tuo sito? Scopri come ottimizzarli: hosting locale, WOFF2, font-display swap, preload e subsetting per WordPress.","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"","_seopress_redirections_param":"","_seopress_redirections_type":0,"_seopress_analysis_target_kw":"","footnotes":""},"categories":[1699],"tags":[],"class_list":["post-25849","post","type-post","status-publish","format-standard","has-post-thumbnail","category-performance-e-ottimizzazione"],"_links":{"self":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25849","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/comments?post=25849"}],"version-history":[{"count":0,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/posts\/25849\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media\/25850"}],"wp:attachment":[{"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/media?parent=25849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/categories?post=25849"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/soccorsowp.it\/blog\/wp-json\/wp\/v2\/tags?post=25849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}