{"id":123617,"date":"2025-03-03T08:20:46","date_gmt":"2025-03-03T06:20:46","guid":{"rendered":"https:\/\/elementor.com\/blog\/come-usare-font-face-in-css\/"},"modified":"2025-12-17T17:03:15","modified_gmt":"2025-12-17T15:03:15","slug":"come-usare-font-face-in-css","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/","title":{"rendered":"Come Usare @font-face in CSS"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

I caratteri personalizzati ti permettono di:<\/span><\/p>\n

    \n
  1. Impostare un tono unico:<\/b> Che tu voglia un’atmosfera giocosa, sofisticata, moderna o vintage, i caratteri giusti aiutano a stabilire la personalit\u00e0 distintiva del tuo sito.<\/span><\/li>\n
  2. Migliorare la leggibilit\u00e0:<\/b> Caratteri personalizzati selezionati con cura possono migliorare la leggibilit\u00e0, rendendo i tuoi contenuti pi\u00f9 facili e piacevoli da consumare.<\/span><\/li>\n
  3. Aumentare il riconoscimento del marchio:<\/b> L’uso di caratteri personalizzati che si allineano con l’identit\u00e0 del tuo marchio rafforza un’esperienza visiva memorabile per i tuoi visitatori.<\/span><\/li>\n<\/ol>\n

    Per fortuna, implementare caratteri personalizzati sul tuo sito \u00e8 pi\u00f9 facile di quanto potresti pensare! Questa guida ti far\u00e0 immergere nel potere della regola CSS<\/a> @font-face, dandoti il potere di portare la tipografia del tuo sito al livello successivo.<\/span><\/p>\n

    Una nota per gli utenti WordPress:<\/b> Se stai costruendo su WordPress, strumenti come il costruttore di siti Elementor semplificano l’intero processo di aggiunta e gestione dei caratteri personalizzati. La sua interfaccia intuitiva e l’integrazione senza problemi rendono un gioco da ragazzi lavorare con i caratteri.<\/span><\/p>\n

    Selezione e Preparazione dei Caratteri<\/span><\/h2>\n

    Scelte dei Caratteri: Espandere i Tuoi Orizzonti Creativi<\/span><\/h3>\n

    Le tue scelte di caratteri gettano le basi per il linguaggio visivo del tuo sito. Dedicare tempo a scoprire i caratteri perfetti \u00e8 un investimento cruciale per il successo del tuo design. Ecco da dove iniziare la tua avventura con i caratteri:<\/span><\/p>\n

    Servizi di Caratteri Popolari<\/span><\/h4>\n
      \n
    1. Google Fonts:<\/b> questo<\/span> \u00e8 una vasta libreria open-source con stili diversi. \u00c8 un ottimo punto di partenza, offrendo un’integrazione rapida e facile.<\/span><\/li>\n
    2. Adobe Fonts:<\/b> Questo servizio fornisce caratteri di alta qualit\u00e0, spesso con famiglie di caratteri estese (vari pesi e stili), soprattutto se hai gi\u00e0 un abbonamento Adobe Creative Cloud<\/a>.<\/span><\/li>\n<\/ol>\n

      Self-Hosting vs. Caratteri Ospitati:<\/span><\/h4>\n
        \n
      • Self-Hosting:<\/b> Fornisce il pieno controllo sul caricamento e gli aggiornamenti dei caratteri, ma richiede di ottenere le licenze appropriate e gestire i file sul tuo server.<\/span><\/li>\n
      • Caratteri Ospitati:<\/b> Servizi come Google Fonts gestiscono i dettagli tecnici, rendendo l’implementazione pi\u00f9 semplice. Tuttavia, hai meno controllo sugli aggiornamenti e la disponibilit\u00e0 dei caratteri.<\/span><\/li>\n<\/ul>\n

        L’Importanza delle Licenze<\/span><\/h3>\n

        Quando selezioni i caratteri, soprattutto da risorse gratuite, fai sempre attenzione ai loro termini di licenza! Rispettare la propriet\u00e0 intellettuale assicura che tu usi i caratteri in modo legale ed etico. Ecco alcuni tipi di licenza comuni:<\/span><\/p>\n

          \n
        1. Licenze Open-Source:<\/b> Queste generalmente permettono l’uso gratuito, la modifica e la distribuzione (ad esempio, SIL Open Font License).<\/span><\/li>\n
        2. Licenze Commerciali:<\/b> Queste richiedono un pagamento per l’uso, specialmente in progetti commerciali.<\/span><\/li>\n
        3. Licenze Ristrette:<\/b> Limitano l’uso a progetti personali o a un certo numero di visualizzazioni di pagina.<\/span><\/li>\n<\/ol>\n

          Suggerimento Pro:<\/b> Elementor Hosting semplifica il processo, offrendo caratteri completamente licenziati e occupandosi della configurazione tecnica. Puoi concentrarti sulla creativit\u00e0 e lasciarti alle spalle le complessit\u00e0 legali.<\/span><\/p>\n

          Formati dei Caratteri: Capire l’Alfabeto Zuppa<\/span><\/h3>\n

          I caratteri web vengono in vari formati di file per garantire la compatibilit\u00e0 tra diversi browser e sistemi operativi. Ecco una panoramica di quelli che probabilmente incontrerai:<\/span><\/p>\n

            \n
          • TTF (TrueType Font):<\/b> Un formato di carattere classico che offre un ampio supporto, rendendolo una scelta sicura.<\/span><\/li>\n
          • OTF (OpenType Font):<\/b> \u00e8 un formato moderno con funzionalit\u00e0 avanzate come legature, glifi alternativi e supporto linguistico esteso.<\/span><\/li>\n
          • WOFF (Web Open Font Format): <\/b>\u00e8 specificamente ottimizzato per la consegna web, con una dimensione del file pi\u00f9 piccola per un caricamento pi\u00f9 veloce.<\/span><\/li>\n
          • WOFF2 (Web Open Font Format 2): <\/b>questo \u00e8 un miglioramento rispetto a WOFF con una compressione ancora migliore, risultando nei tempi di caricamento pi\u00f9 veloci.<\/span><\/li>\n
          • EOT (Embedded Open Type): <\/b>\u00e8 un formato legacy usato principalmente per garantire la compatibilit\u00e0 con le versioni pi\u00f9 vecchie di Internet Explorer.<\/span><\/li>\n<\/ul>\n

            Migliore Pratica:<\/b> Dai priorit\u00e0 a WOFF2 per la sua compressione superiore, sempre con WOFF incluso come fallback per un supporto browser pi\u00f9 ampio.<\/span><\/p>\n

            Devo Convertire i File dei Font?<\/span><\/h4>\n

            Anche se molti servizi di font forniscono file di web font ottimizzati nei formati necessari, potresti trovare il font perfetto che ha bisogno di essere reso pronto per il web. <\/span><\/p>\n

            Nota:<\/b> Controlla sempre due volte i termini di licenza prima di convertire i font per assicurarti che la licenza che hai acquisito permetta questo tipo di modifica.<\/span><\/p>\n

            Ottimizzazione: La Chiave per Font che Caricano Velocemente<\/span><\/h3>\n

            I font personalizzati, specialmente quelli con stili e pesi multipli, possono aggiungere un po’ di sovraccarico alla velocit\u00e0 di caricamento del tuo sito web. Affrontiamo questo con alcune tecniche di ottimizzazione essenziali:<\/span><\/p>\n

              \n
            • Subsetting dei Font:<\/b> La maggior parte dei font contiene una vasta gamma di caratteri che probabilmente non userai mai sul tuo sito web. Il subsetting crea un file di font ridotto che include solo i caratteri necessari, riducendo significativamente la dimensione del file. Molti servizi di font offrono opzioni di subsetting, oppure puoi esplorare strumenti dedicati a questo.<\/span><\/li>\n<\/ul>\n

              Consigli Aggiuntivi per Migliorare le Prestazioni<\/span><\/h3>\n
                \n
              1. Usa la Cache del Browser:<\/b> Incoraggia i browser a memorizzare i font localmente usando appropriati header di caching. L’hosting di Elementor si occupa delle configurazioni di caching avanzate per te, fornendo un vantaggio di velocit\u00e0.<\/span><\/li>\n
              2. Priorizza il Caricamento dei Font:<\/b> Pi\u00f9 avanti copriremo le strategie riguardanti la propriet\u00e0 font-display per controllare come e quando i tuoi font personalizzati si caricano, prevenendo fastidiosi flash di contenuto non stilizzato.<\/span><\/li>\n<\/ol>\n

                Nota:<\/b> Anche con l’ottimizzazione, l’uso di font personalizzati naturalmente aggiunge <\/span>un po’<\/span><\/i> di tempo di caricamento extra rispetto ai font di sistema predefiniti. Il compromesso \u00e8 l’impatto migliorato sul design e sul brand che offrono.<\/span><\/p>\n

                L’Anatomia della Regola font-face <\/span><\/h2>\n

                Sintassi di Base: Introdurre il Tuo Font Personalizzato<\/span><\/h3>\n

                In sostanza, la regola @font-face dice al browser come trovare e usare i tuoi file di font personalizzati. Ecco la struttura di base:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

                \n\t\t\t\t
                \n\t\t\t\t\t\t\t
                \n\t\t\t
                \n\t\t\t\t\n\t\t\t\t\tCSS\r\n@font-face {\r\n  font-family: 'MyCustomFont'; \/* Give your font a unique name *\/\r\n  src: url('path\/to\/my-custom-font.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font.woff') format('woff'); \/* Path to font files *\/\r\n  font-weight: normal;  \/* Specify the font's weight *\/\r\n  font-style: normal;  \/* Specify the font's style *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e73d7cb elementor-widget elementor-widget-text-editor\" data-id=\"e73d7cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Analizziamo le propriet\u00e0 chiave:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-family:<\/b><span style=\"font-weight: 400;\"> Il nome che userai nel tuo CSS per fare riferimento a questo particolare font (ad esempio, in una dichiarazione font-family sugli elementi di testo).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>src:<\/b><span style=\"font-weight: 400;\">  Specifica la posizione dei tuoi file di font usando la funzione <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/url\/\"   title=\"What is a URL? Structure, Syntax &#038; Best Practices\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20381\">url<\/a>(). Linee src multiple ti permettono di fornire sia formati WOFF2 che WOFF per una compatibilit\u00e0 ottimale con i browser. La funzione format() dice al browser il tipo di ciascun file di font.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-weight:<\/b><span style=\"font-weight: 400;\"> Definisce se il font \u00e8 normale, grassetto, ecc. (ad esempio, font-weight: 400 per normale, font-weight: 700 per grassetto).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-style:<\/b><span style=\"font-weight: 400;\"> Indica se il font \u00e8 normale, corsivo o obliquo.<\/span><\/li>\n<\/ol>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\">  Includi sempre i formati dei file di font e i percorsi che corrispondono alla struttura dei file del tuo sito web. Se usi un servizio di font, spesso ti forniranno lo snippet di codice @font-face pronto per essere copiato e incollato.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Mappatura dei Pesi e degli Stili dei Font<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Per usare diversi pesi (grassetto, extra-grassetto, ecc.) e stili (corsivo) del tuo font personalizzato, avrai bisogno di blocchi @font-face separati per ogni variazione. Ecco un esempio:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a596566 elementor-widget elementor-widget-code-highlight\" data-id=\"a596566\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n\/* Normal Weight *\/\r\n@font-face {\r\n  font-family: 'MyCustomFont'; \r\n  src: url('path\/to\/my-custom-font.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font.woff') format('woff'); \r\n  font-weight: normal;\r\n  font-style: normal; \r\n}\r\n\r\n\/* Bold Weight *\/\r\n@font-face {\r\n  font-family: 'MyCustomFont'; \r\n  src: url('path\/to\/my-custom-font-bold.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font-bold.woff') format('woff'); \r\n  font-weight: bold; \r\n  font-style: normal; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00e3cf1 elementor-widget elementor-widget-text-editor\" data-id=\"00e3cf1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Nota Importante:<\/b><span style=\"font-weight: 400;\"> Assicurati che i nomi dei file di font nelle tue URL src corrispondano ai nomi effettivi dei file sul tuo server o forniti dal tuo servizio di font.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Propriet\u00e0 Avanzate: Regolazione Fine del Caricamento dei Font<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Approfondiamo una propriet\u00e0 che impatta significativamente l&#8217;esperienza dell&#8217;utente:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Font-display<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Questa propriet\u00e0 controlla come un browser gestisce la visualizzazione del tuo font personalizzato mentre sta scaricando. Aiuta a minimizzare i cambiamenti visivi fastidiosi o i ridisegnamenti della pagina mentre i tuoi font si caricano. Ecco alcune opzioni comuni:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>swap:<\/b><span style=\"font-weight: 400;\"> Visualizza immediatamente un font di fallback e lo scambia con il tuo font personalizzato una volta pronto.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>block:<\/b><span style=\"font-weight: 400;\"> Nasconde brevemente il testo finch\u00e9 il tuo font personalizzato non si carica, aiutando a minimizzare grandi spostamenti di layout.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>fallback: <\/b><span style=\"font-weight: 400;\">Un breve periodo di testo invisibile seguito dallo scambio con il font di fallback.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>optional: <\/b><span style=\"font-weight: 400;\">Periodo molto breve di testo invisibile seguito dall&#8217;uso del font personalizzato solo se gi\u00e0 scaricato.<\/span><\/li>\n<\/ul>\n<p><b>Consiglio:<\/b><span style=\"font-weight: 400;\"> Sperimenta con questi valori per trovare il miglior equilibrio tra minimizzare il tempo di caricamento percepito e gli spostamenti di layout fastidiosi sul <\/span><i><span style=\"font-weight: 400;\">tuo<\/span><\/i><span style=\"font-weight: 400;\"> sito web.<\/span><\/p>\n<p><b>Consiglio Pro per gli Utenti Elementor:<\/b><span style=\"font-weight: 400;\"> Sperimenta con i valori di font-display, e l&#8217;esperienza complessiva di caricamento dei font \u00e8 resa senza soluzione di continuit\u00e0 all&#8217;interno delle impostazioni di tipografia globale di Elementor.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">unicode-range: Ottimizzare la Consegna dei Font<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La propriet\u00e0 unicode-range all&#8217;interno della tua regola @font-face ti permette di definire un set specifico di caratteri Unicode da includere nel file di font scaricato. Questo \u00e8 incredibilmente utile per siti web multilingue o quando sai che avrai bisogno solo di un certo sottoinsieme di caratteri di un font. Ecco come appare:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df292b7 elementor-widget elementor-widget-code-highlight\" data-id=\"df292b7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n@font-face {\r\n  font-family: 'MyCustomFont';\r\n  src: url('path\/to\/my-custom-font.woff2') format('woff2'),\r\n       url('path\/to\/my-custom-font.woff') format('woff');\r\n  font-weight: normal;\r\n  font-style: normal;\r\n  unicode-range: U+0000-00FF (Basic Latin); \/* Include only Basic Latin characters *\/\r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-04771a3 elementor-widget elementor-widget-text-editor\" data-id=\"04771a3\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Perch\u00e9 \u00c8 Importante Questa Cosa?<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>File di Font Pi\u00f9 Piccoli:<\/b><span style=\"font-weight: 400;\"> Migliora la velocit\u00e0 di download e riduce l&#8217;uso della banda, creando un&#8217;esperienza complessivamente pi\u00f9 scattante.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Prestazioni Migliorate per Siti Multilingue:<\/b><span style=\"font-weight: 400;\"> Se il tuo sito web supporta pi\u00f9 lingue, l&#8217;uso strategico dell&#8217;intervallo Unicode pu\u00f2 ridurre significativamente il sovraccarico di caricamento dei font.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Costruire uno Stack di Font Robusto <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">L&#8217;Importanza dei Font di Fallback<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Anche con un&#8217;attenta ottimizzazione, potrebbero esserci casi in cui il tuo font personalizzato non riesce a caricarsi. Forse un utente ha una connessione internet lenta, o c&#8217;\u00e8 un problema con il file del font stesso. \u00c8 qui che entrano in gioco i font di fallback! Uno stack di font ti permette di definire una lista prioritaria di font in modo che il browser provi a caricarli in ordine fino a trovarne uno che funziona.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Strategie per Scegliere i Font di Fallback<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Somiglianza Visiva<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Seleziona font di fallback che assomigliano da vicino allo stile e al feeling del tuo font personalizzato principale. Questo assicura una transizione meno brusca se il font personalizzato non si carica.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Font Web-Safe Comuni<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Includere font ampiamente disponibili come Arial, Helvetica, Times New Roman, Georgia o Verdana come fallback finale fornisce una rete di sicurezza.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Categorie di Font<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Scegli fallback dalla stessa categoria generale del tuo font personalizzato:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Serif:<\/b><span style=\"font-weight: 400;\"> Font con piccoli tratti decorativi alle estremit\u00e0 delle lettere (es. Times New Roman)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sans-serif:<\/b><span style=\"font-weight: 400;\"> Font senza serif, che offrono un look pulito e moderno (es. Arial)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Monospace:<\/b><span style=\"font-weight: 400;\"> Font in cui tutti i caratteri occupano la stessa quantit\u00e0 di spazio orizzontale (es. Courier New)<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Esempio di uno Stack di Font<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-92d10d8 elementor-widget elementor-widget-code-highlight\" data-id=\"92d10d8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  font-family: 'MyCustomFont', Helvetica, sans-serif; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e4ac335 elementor-widget elementor-widget-text-editor\" data-id=\"e4ac335\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">In questo esempio:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Il browser prima tenta di usare &#8216;MyCustomFont.&#8217;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Se non ha successo, prova a usare il font Helvetica predefinito del sistema.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Se anche questo non funziona, passa a qualsiasi font sans-serif disponibile.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Creare una Gerarchia Visiva<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Il tuo stack di font non dovrebbe essere solo una rete di sicurezza; \u00e8 uno strumento per creare struttura nel tuo design:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Titoli:<\/b><span style=\"font-weight: 400;\"> Spesso usano font pi\u00f9 grassetti o distintivi (font display) per creare una chiara separazione visiva.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Testo del Corpo:<\/b><span style=\"font-weight: 400;\"> Dai priorit\u00e0 ai font progettati per la leggibilit\u00e0 in dimensioni pi\u00f9 piccole.<\/span><\/li>\n<\/ul>\n<p><b>Consiglio Elementor:<\/b><span style=\"font-weight: 400;\"> I controlli intuitivi di tipografia di Elementor ti permettono di sperimentare senza sforzo con stack di font, abbinando font personalizzati con fallback complementari per stabilire una forte gerarchia visiva in tutto il tuo sito web.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Compatibilit\u00e0 del Browser e Test <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Comprendere le Stranezze dei Browser<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Mentre i browser moderni hanno un eccellente supporto per i font, possono esistere variazioni di rendering tra di loro. I font appaiono leggermente pi\u00f9 spessi o sottili o hanno piccole differenze di spaziatura. \u00c8 essenziale prepararsi per queste sfumature, specialmente per design pixel-perfect.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Guai con i Browser Obsoleti (Internet Explorer)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Le versioni pi\u00f9 vecchie di Internet Explorer (IE) sono note per il supporto limitato ai formati di font e talvolta per un comportamento di rendering imprevedibile. Ecco cosa tenere a mente:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Attieniti a EOT:<\/b><span style=\"font-weight: 400;\"> Dovresti includere il formato di font EOT per rendere i tuoi blocchi @font-face compatibili con versioni davvero vecchie di IE.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Abbraccia la Degradazione Graduale:<\/b><span style=\"font-weight: 400;\"> Progetta la tua tipografia con fallback in modo che il tuo contenuto rimanga leggibile anche nei browser pi\u00f9 vecchi, anche se alcuni caratteri del tuo font personalizzato non sono completamente realizzati.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Test Approfondito: Il Tuo Asso nella Manica<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La chiave per affrontare i problemi di compatibilit\u00e0 \u00e8 testare il tuo sito web su diversi browser e dispositivi. Here&#8217;s what to look for:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Incongruenze Visive:<\/b><span style=\"font-weight: 400;\"> Alcuni dei tuoi font scelti sembrano drasticamente diversi tra i browser? Potresti dover modificare il tuo stack di font o esplorare alternative di font pi\u00f9 ampiamente supportate.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Spostamenti di Layout:<\/b><span style=\"font-weight: 400;\"> Testa il tuo sito su una gamma di dimensioni dello schermo per assicurarti che la tua tipografia si adatti in modo responsivo e non causi problemi di layout.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Strumenti del Mestiere<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Strumenti di sviluppo del browser:<\/b><span style=\"font-weight: 400;\"> La maggior parte dei browser (Chrome, Firefox, Edge, ecc.) hanno strumenti di sviluppo incorporati che ti permettono di ispezionare le famiglie di font, identificare i file di font caricati e diagnosticare problemi di rendering.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Piattaforme di test cross-browser:<\/b><span style=\"font-weight: 400;\"> Servizi come BrowserStack o LambdaTest possono aiutarti a testare l&#8217;aspetto del tuo sito web su una vasta gamma di browser e dispositivi senza doverli installare tutti tu stesso.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Anche con test approfonditi, alcune piccole discrepanze tra browser e dispositivi sono inevitabili. L&#8217;obiettivo \u00e8 assicurarsi che i tuoi font personalizzati migliorino la leggibilit\u00e0 e lo stile ovunque, anche se ci sono variazioni.<\/span><\/p>\n<p><b>Consiglio Elementor:<\/b><span style=\"font-weight: 400;\"> La funzionalit\u00e0 di anteprima live di Elementor e gli strumenti di editing responsive integrati semplificano il test delle combinazioni di font su diverse dimensioni dello schermo.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Migliori pratiche per le prestazioni <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">L&#8217;impatto dei font sulla velocit\u00e0 del sito web<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Mentre i font personalizzati sono fantastici per il design, possono influenzare il tempo di caricamento del tuo sito web. Ecco cosa pu\u00f2 succedere se non stai attento:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flash di testo non stilizzato (FOUT):<\/b><span style=\"font-weight: 400;\"> Quando il tuo font personalizzato non \u00e8 pronto, il browser potrebbe inizialmente mostrare un font di riserva, poi passare bruscamente al tuo font personalizzato quando si carica. Questo crea un cambiamento visivo brusco poich\u00e9 il layout potrebbe rifluire.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Flash di testo invisibile (FOIT):<\/b><span style=\"font-weight: 400;\"> In alcuni casi, il browser potrebbe nascondere completamente il testo fino a quando il font personalizzato non \u00e8 disponibile, portando a un&#8217;esperienza utente frustrante.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Bilanciare estetica e prestazioni<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La buona notizia \u00e8 che con alcune tecniche intelligenti, puoi minimizzare l&#8217;impatto negativo sulle prestazioni dei font personalizzati!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tecniche per l&#8217;ottimizzazione dei font<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Precaricamento dei font<\/span><\/h4>\n<p><span style=\"font-weight: 400;\"> Il tag &lt;link rel=&#8221;preload&#8221;&gt; dice al browser di recuperare i tuoi file di font il prima possibile nel processo di caricamento della pagina. Ecco un esempio:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HTML<\/span><span style=\"font-weight: 400;\"><br \/><\/span><span style=\"font-weight: 400;\">&lt;link rel=&#8221;preload&#8221; href=&#8221;\/fonts\/my-custom-font.woff2&#8243; as=&#8221;font&#8221; type=&#8221;font\/woff2&#8243; crossorigin&gt;<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Importante:<\/b><span style=\"font-weight: 400;\"> Usa il precaricamento con moderazione solo per i tuoi font pi\u00f9 critici per evitare di rallentare altre risorse importanti.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dare priorit\u00e0 a WOFF2 (con fallback a WOFF):<\/b><span style=\"font-weight: 400;\"> I browser moderni supportano ampiamente il formato WOFF2, offrendo un&#8217;eccellente compressione. Offri sempre WOFF come fallback per i browser pi\u00f9 vecchi.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sfruttare il caching:<\/b><span style=\"font-weight: 400;\"> Incoraggia i browser a memorizzare localmente i tuoi font in modo che le visite successive al tuo sito web si carichino pi\u00f9 velocemente.<\/span> <\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Suggerimenti aggiuntivi<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Limitare il numero di font:<\/b><span style=\"font-weight: 400;\"> Evita di usare una moltitudine di font personalizzati. Pochi font scelti con cura fanno la differenza.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Considera un approccio &#8216;System Font First&#8217;:<\/b><span style=\"font-weight: 400;\"> I font di sistema moderni (quelli gi\u00e0 presenti sui dispositivi degli utenti) possono a volte essere adatti per certe sezioni del tuo sito web. Abbinali a un font personalizzato per i titoli, ad esempio, per bilanciare velocit\u00e0 di caricamento e branding unico.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Tipografia avanzata con font personalizzati <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Font variabili: Potenza di design dinamica<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I font variabili sono un singolo file di font che contiene un&#8217;ampia gamma di variazioni stilistiche. Ci\u00f2 significa che puoi regolare il peso del font, la larghezza, l&#8217;inclinazione e altro ancora, tutto al volo!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ecco perch\u00e9 sono fantastici:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dimensione del file ridotta:<\/b><span style=\"font-weight: 400;\"> C&#8217;\u00e8 meno bisogno di caricare pi\u00f9 file di font per diversi pesi e stili.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Controllo dettagliato:<\/b><span style=\"font-weight: 400;\"> Anima effetti di testo o crea variazioni di font perfettamente sintonizzate per la responsivit\u00e0.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Possibilit\u00e0 creative:<\/b><span style=\"font-weight: 400;\"> Sperimenta con stili che i font tradizionali semplicemente non offrono.<\/span><\/li>\n<\/ul>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\"> Il supporto per i font variabili \u00e8 eccellente nei browser moderni, ma controlla la compatibilit\u00e0 se il tuo pubblico include utenti di browser pi\u00f9 vecchi.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Esplorare le propriet\u00e0 CSS per un controllo dettagliato<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Diamo un&#8217;occhiata ad alcune propriet\u00e0 CSS avanzate per prendere il comando dello styling del testo:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-variant:<\/b><span style=\"font-weight: 400;\"> Fornisce accesso a funzionalit\u00e0 tipografiche come maiuscoletto, legature e diversi stili numerici se supportati dal font personalizzato scelto.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-feature-settings:<\/b><span style=\"font-weight: 400;\"> Ti d\u00e0 un controllo ancora pi\u00f9 granulare sulle funzionalit\u00e0 disponibili all&#8217;interno di un font.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>font-smoothing:<\/b><span style=\"font-weight: 400;\"> Ti aiuta a regolare finemente come viene reso il testo, in particolare per dimensioni pi\u00f9 piccole. Sperimenta con valori come grayscale o antialiased per vedere l&#8217;effetto sui tuoi font.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Font Decorativi ed Effetti di Testo<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I font personalizzati aprono un mondo di espressione nel design. Ecco dove puoi esagerare:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Titoli d&#8217;Impatto:<\/b><span style=\"font-weight: 400;\"> Un font display distintivo pu\u00f2 fare una prima impressione potente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Elementi Accattivanti:<\/b><span style=\"font-weight: 400;\"> Usa font appariscenti con moderazione per evidenziare call-to-action o citazioni importanti.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Effetti di Testo CSS:<\/b><span style=\"font-weight: 400;\"> Combina font personalizzati con propriet\u00e0 CSS come text-shadow, text-transform e text-decoration per creare stili di testo unici.<\/span><\/li>\n<\/ul>\n<p><b>Importante:<\/b><span style=\"font-weight: 400;\"> Usa i font decorativi strategicamente. L&#8217;uso eccessivo di font display difficili da leggere pu\u00f2 influire negativamente sull&#8217;accessibilit\u00e0.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Garantire l&#8217;Accessibilit\u00e0 con Font Personalizzati <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Scegliere Font per la Leggibilit\u00e0<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La leggibilit\u00e0 \u00e8 cruciale per garantire che il tuo contenuto sia accessibile a tutti, inclusi quelli con problemi visivi. Considera questi fattori quando scegli font personalizzati:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dimensione del Font:<\/b><span style=\"font-weight: 400;\"> Assicurati che il testo del corpo sia di una dimensione comoda da leggere. Si raccomanda un minimo di 16px, ma a seconda del font, potresti anche andare un po&#8217; pi\u00f9 grande.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Altezza della Linea (line-height): <\/b><span style=\"font-weight: 400;\">Una spaziatura adeguata tra le righe aiuta l&#8217;occhio a seguire da una riga all&#8217;altra. Un&#8217;altezza di linea di almeno 1.5 volte la dimensione del font \u00e8 una buona base di partenza.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>X-Height:<\/b><span style=\"font-weight: 400;\"> I font con x-height pi\u00f9 alte (l&#8217;altezza delle lettere minuscole) tendono ad essere pi\u00f9 facili da leggere, specialmente in dimensioni pi\u00f9 piccole.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contrasto:<\/b><span style=\"font-weight: 400;\"> Punta a un forte contrasto tra il colore del font e il colore dello sfondo. Usa controlli di contrasto online per assicurarti di soddisfare gli standard delle Linee Guida per l&#8217;Accessibilit\u00e0 dei Contenuti Web (WCAG).<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Considerazioni Aggiuntive sull&#8217;Accessibilit\u00e0<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Evita il Tutto Maiuscolo:<\/b><span style=\"font-weight: 400;\"> Grandi blocchi di testo in maiuscolo sono difficili da leggere per tutti, e specialmente per le persone con dislessia.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Limita l&#8217;Uso di Corsivo e Font Molto Decorativi:<\/b><span style=\"font-weight: 400;\"> Questi possono essere difficili da leggere, particolarmente per blocchi di testo pi\u00f9 lunghi.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Le migliori pratiche di accessibilit\u00e0 vanno oltre i font. Anche la struttura complessiva del tuo sito web, la navigazione e il testo alternativo delle immagini devono essere considerati.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Esempi Pratici con Elementor Website Builder<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Esempi Passo-Passo<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Aggiungere un Font Personalizzato<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Font Globali di Elementor Pro:<\/b><span style=\"font-weight: 400;\"> Vai su Elementor &gt; Font Personalizzati. Carica i tuoi file di font e dai al tuo font un nome memorabile. Ora, questo font \u00e8 disponibile in tutto Elementor.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Applicare Font Personalizzati Facilmente<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Selezionare la Tipografia:<\/b><span style=\"font-weight: 400;\"> Scegli qualsiasi elemento di testo (titolo, paragrafo, ecc.) e apri la sezione &#8216;Tipografia&#8217; nel pannello di stile di Elementor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Selezione del Font:<\/b><span style=\"font-weight: 400;\"> Il tuo font personalizzato apparir\u00e0 ora insieme ai font web standard nel menu a discesa. Sceglilo e regola peso, stile, ecc., come necessario.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Effetti Tipografici Avanzati in Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Elementor offre numerose opzioni di stile per elevare qualsiasi elemento di testo:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ombre del Testo:<\/b><span style=\"font-weight: 400;\"> Aggiungi dimensione ed enfasi con i controlli &#8216;Ombra del Testo&#8217;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Trasformazioni del Testo:<\/b><span style=\"font-weight: 400;\"> Imposta facilmente il testo in maiuscolo, minuscolo o iniziale maiuscola usando l&#8217;opzione &#8216;Trasforma&#8217;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Decorazione del Testo:<\/b><span style=\"font-weight: 400;\"> Sottolinea, sovralinea o barra il testo per effetti speciali.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Spaziatura tra Lettere e Parole:<\/b><span style=\"font-weight: 400;\"> Regola finemente la spaziatura per un raffinamento visivo.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Integrazione con le Impostazioni Globali di Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I Font Globali e gli Stili Globali di Elementor rendono l&#8217;applicazione dei tuoi font personalizzati su tutto il tuo sito web un gioco da ragazzi:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Definisci la Tua Gerarchia Visiva:<\/b><span style=\"font-weight: 400;\"> All&#8217;interno delle impostazioni di stile del tema di Elementor, puoi impostare stili tipografici predefiniti per titoli (H1-H6), paragrafi e altro.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Coerenza su Tutto il Sito:<\/b><span style=\"font-weight: 400;\"> Qualsiasi modifica ai tuoi stili globali si propaga automaticamente in tutto il tuo sito web, garantendo una completa coerenza e facendoti risparmiare un sacco di tempo.<\/span><\/li>\n<\/ul>\n<p><b>Ottimizzazione Automatica dei Font:<\/b><span style=\"font-weight: 400;\"> I tuoi font personalizzati ricevono il trattamento di miglioramento delle prestazioni senza alcuna configurazione extra da parte tua.<\/span><\/p>\n<p><b>Soluzione Tutto-in-Uno:<\/b><span style=\"font-weight: 400;\"> Non c&#8217;\u00e8 bisogno di gestire account di hosting e costruttori di siti web separati. L&#8217;Hosting di Elementor riunisce tutto in un ambiente unificato e ottimizzato.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusione<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Ora hai capito che i font personalizzati sono molto pi\u00f9 di un semplice vezzo estetico. Incarnano la personalit\u00e0 del tuo sito web e giocano un ruolo fondamentale nel tuo branding complessivo. Ecco un riepilogo di quello che abbiamo visto:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Il Potere della Scelta:<\/b><span style=\"font-weight: 400;\"> Esplora la ricchezza di font su piattaforme come Google Fonts e Adobe Fonts.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Le Licenze Contano:<\/b><span style=\"font-weight: 400;\"> Rispetta i termini di licenza per evitare grattacapi legali.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>L&#8217;Ottimizzazione \u00e8 Fondamentale:<\/b><span style=\"font-weight: 400;\"> Il subsetting dei font, il caching e il preloading assicurano un&#8217;esperienza utente fluida.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Stranezze dei Browser:<\/b><span style=\"font-weight: 400;\"> Testa su diversi browser e gestisci con eleganza le limitazioni dei browser pi\u00f9 vecchi.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tipografia Avanzata:<\/b><span style=\"font-weight: 400;\"> Sfrutta i font variabili e le propriet\u00e0 CSS per effetti unici.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Accessibilit\u00e0 Prima di Tutto:<\/b><span style=\"font-weight: 400;\"> Scegli font leggibili e dai priorit\u00e0 a un contrasto sufficiente per tutti gli utenti.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Il Vantaggio di Elementor:<\/b><span style=\"font-weight: 400;\"> Scegli Elementor Hosting per goderti un flusso di lavoro semplificato per i font personalizzati con facile integrazione, impostazioni globali e ottimizzazione delle prestazioni.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">I font sono uno strumento di design potente. Usali strategicamente per modellare l&#8217;aspetto generale del tuo sito. Non aver paura di sperimentare e trovare i caratteri perfetti per far risaltare davvero il tuo sito web!<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>I caratteri che scegli dicono un sacco sullo stile e il marchio del tuo sito. Mentre i classici caratteri &#8216;web-safe&#8217; fanno il loro lavoro, possono far sembrare il tuo sito generico e senza ispirazione. \u00c8 qui che entrano in gioco i caratteri personalizzati, offrendo infinite possibilit\u00e0 per far davvero risaltare il tuo design.<\/p>\n","protected":false},"author":2024234,"featured_media":120139,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[518],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123617","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-risorse"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come Usare @font-face in CSS<\/title>\n<meta name=\"description\" content=\"I caratteri che scegli dicono un sacco sullo stile e il marchio del tuo sito. Mentre i classici caratteri &#039;web-safe&#039; fanno il loro lavoro, possono far sembrare il tuo sito generico e senza ispirazione. \u00c8 qui che entrano in gioco i caratteri personalizzati, offrendo infinite possibilit\u00e0 per far davvero risaltare il tuo design.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Usare @font-face in CSS\" \/>\n<meta property=\"og:description\" content=\"I caratteri che scegli dicono un sacco sullo stile e il marchio del tuo sito. Mentre i classici caratteri &#039;web-safe&#039; fanno il loro lavoro, possono far sembrare il tuo sito generico e senza ispirazione. \u00c8 qui che entrano in gioco i caratteri personalizzati, offrendo infinite possibilit\u00e0 per far davvero risaltare il tuo design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:20:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-17T15:03:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Come Usare @font-face in CSS\",\"datePublished\":\"2025-03-03T06:20:46+00:00\",\"dateModified\":\"2025-12-17T15:03:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/\"},\"wordCount\":3523,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Risorse\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/\",\"url\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/\",\"name\":\"Come Usare @font-face in CSS\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T06:20:46+00:00\",\"dateModified\":\"2025-12-17T15:03:15+00:00\",\"description\":\"I caratteri che scegli dicono un sacco sullo stile e il marchio del tuo sito. Mentre i classici caratteri 'web-safe' fanno il loro lavoro, possono far sembrare il tuo sito generico e senza ispirazione. \u00c8 qui che entrano in gioco i caratteri personalizzati, offrendo infinite possibilit\u00e0 per far davvero risaltare il tuo design.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Risorse\",\"item\":\"https:\/\/elementor.com\/blog\/it\/category\/risorse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Usare @font-face in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/it\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Come Usare @font-face in CSS","description":"I caratteri che scegli dicono un sacco sullo stile e il marchio del tuo sito. Mentre i classici caratteri 'web-safe' fanno il loro lavoro, possono far sembrare il tuo sito generico e senza ispirazione. \u00c8 qui che entrano in gioco i caratteri personalizzati, offrendo infinite possibilit\u00e0 per far davvero risaltare il tuo design.","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:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/","og_locale":"it_IT","og_type":"article","og_title":"Come Usare @font-face in CSS","og_description":"I caratteri che scegli dicono un sacco sullo stile e il marchio del tuo sito. Mentre i classici caratteri 'web-safe' fanno il loro lavoro, possono far sembrare il tuo sito generico e senza ispirazione. \u00c8 qui che entrano in gioco i caratteri personalizzati, offrendo infinite possibilit\u00e0 per far davvero risaltare il tuo design.","og_url":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:20:46+00:00","article_modified_time":"2025-12-17T15:03:15+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Scritto da":"Itamar Haim","Tempo di lettura stimato":"18 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Come Usare @font-face in CSS","datePublished":"2025-03-03T06:20:46+00:00","dateModified":"2025-12-17T15:03:15+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/"},"wordCount":3523,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Risorse"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/","url":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/","name":"Come Usare @font-face in CSS","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T06:20:46+00:00","dateModified":"2025-12-17T15:03:15+00:00","description":"I caratteri che scegli dicono un sacco sullo stile e il marchio del tuo sito. Mentre i classici caratteri 'web-safe' fanno il loro lavoro, possono far sembrare il tuo sito generico e senza ispirazione. \u00c8 qui che entrano in gioco i caratteri personalizzati, offrendo infinite possibilit\u00e0 per far davvero risaltare il tuo design.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/it\/come-usare-font-face-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/it\/"},{"@type":"ListItem","position":2,"name":"Risorse","item":"https:\/\/elementor.com\/blog\/it\/category\/risorse\/"},{"@type":"ListItem","position":3,"name":"Come Usare @font-face in CSS"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/it\/#website","url":"https:\/\/elementor.com\/blog\/it\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/it\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/it\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/123617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/comments?post=123617"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/123617\/revisions"}],"predecessor-version":[{"id":147892,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/123617\/revisions\/147892"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media\/120139"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media?parent=123617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/categories?post=123617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/tags?post=123617"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_persona?post=123617"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_intent?post=123617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}