Inserire caratteri personalizzati tramite @FontFace

I caratteri personalizzati sono un ottimo modo per rendere il tuo sito davvero unico. Puoi scegliere un carattere che si abbini al tuo logo, presente sui biglietti da visita e sui materiali stampati o un carattere particolare che si adatti alla nicchia di mercato a cui si rivolge il sito. I caratteri disponibili nella raccolta integrata diDuda, oltre a quelli presenti nella libreria Google Fonts, rappresentano una vasta gamma di opzioni tra cui scegliere. Se nessuno di questi si abbina al design del tuo sito, consulta la guida di seguito per incorporare caratteri personalizzati.

Disclaimer: questa guida si basa su uno strumento di terze parti, non su uno creato da Duda. Inoltre, la tecnologia @font-face rientra nel concetto di codice personalizzato. Non possiamo garantire che il carattere scelto supporti l'incorporamento web, che i file ricevuti dalla fonderia dei caratteri siano pronti all'uso o che il codice che modifichi sia nel formato corretto.

Sebbene sia raro che questi aspetti causino problemi con la modifica del sito, assicurati di eseguirne il backup prima di apportare modifiche al codice personalizzato. Puoi consultare la nostra politica in materia di codici personalizzati qui.

Preparare file di caratteri personalizzati

I caratteri personalizzati possono essere disponibili in diversi formati e i più popolari sono .otf, .ttf, .woff, .svg, ed .eot. Per poter utilizzare il carattere, devi assicurarti di possedere i file nei formati .ttf, .eot e .svg.

Se disponi solo di file .otf o .ttf, ti consigliamo di usare uno strumento esterno per convertire il carattere nei formati accettati (nella nostra guida qui sotto, usiamo FontSquirrel, ma si può ricorrere a qualsiasi alternativa disponibile).

Convertire file .otf o .ttf

1. Scarica o acquista il carattere nei formati .otf o .ttf.
   Nota

   Affinché funzioni, il carattere deve essere concesso in licenza per il web.

2. Vai allo strumento generatore di webfont FontSquirrel, carica il carattere e convertilo usando l'opzione Expert. Scegli almeno i formati TrueType (.ttf), EOT Lite (.eot), SVG (.svg) e scarica il kit.

Caricare i file dei caratteri su Duda

Vai al passaggio successivo se disponi dei collegamenti ai caratteri, ad esempio perché sono presenti nella tua fonderia, hai già i relativi link o li hai caricati nella piattaforma di condivisione dei file. In caso contrario, dovrai incorporare le versioni .ttf, .svg ed .eot generate del tipo di carattere nel tuo sito.

1. Nel pannello a sinistra, fai clic su Contenuto, poi su Contenuto del sito e quindi su Gestisci file.
2. Fai clic su Carica nuovo file per caricare i file.
3. Passando il mouse su uno degli elementi in File caricati, fai clic su Seleziona per generare un pulsante Scarica file sul tuo sito.
4. Nella barra di navigazione, fai clic su Informazioni e strumenti () e poi su Link di anteprima. Fai clic con il tasto destro del mouse e seleziona Copia indirizzo del link. Questo è il link al file sul tuo sito Duda.

   Questo processo deve essere svolto per ogni singolo file, in modo da ottenere tre link a tre formati di file.

   Nota

   Questo passaggio non funziona quando si crea un'anteprima all'interno dell'editor. Devi usare il link di anteprima presente nella sezione Informazioni e strumenti della barra di navigazione.

Incorpora file su Duda tramite @font-face

1. Vai alla Modalità sviluppatore nel tuo sito, apri il file site.css e incolla il seguente codice:
   

@font-face {
font-family: 'FONT-NAME';
src: url('URL') format('embedded-opentype'),
url('URL') format('svg#FONT-NAME'),
url('URL') format('truetype');
font-weight: normal;
font-style: normal;
}

2. Vai alla cartella che ti è stata fornita dalla tua fonderia di caratteri o che hai scaricato da FontSquirrel e cerca un foglio di stile con un codice simile a quello sopra riportato. La riga che inizia con font-family: presenterà il nome univoco assegnato al tuo carattere.
   
3. Copia il nome del carattere e sostituisci le due istanze di FONT-NAME nel frammento di codice sopra con il nome del carattere.
4. Salva ed esci dalla Modalità sviluppatore.
5. Nel pannello a sinistra, fai clic su Contenuto e poi su Contenuto del sito.
6. Per aggiungere un pulsante al sito, fai clic su Gestisci file e poi su Seleziona nel file del carattere.
7. Fai clic sul pulsante per aprire l'Editor dei contenuti, fai clic con il tasto destro del mouse sull'URL del carattere e seleziona Copia indirizzo del link.
8. Vai alla modalità Sviluppatore, apri site.css, e sostituisci l'URL con i percorsi dei rispettivi formati caricati (l'URL copiato dal pulsante nel passaggio 7), quindi fai clic su Salva.

Di seguito è riportato un esempio di come dovrebbe apparire il codice finito:

Torna all'editor, fai clic con il tasto destro del mouse sull'elemento di testo da modificare e fai clic su Modifica HTML/CSS. Ora puoi applicare il nuovo carattere ai widget su tutti i dispositivi o in visualizzazioni specifiche dei dispositivi utilizzando il frammento del codice CSS nel seguente formato: font-family: 'FONT-NAME' !important;. Ad esempio, per il nostro carattere abbiamo aggiunto questa riga di codice CSS: font-family: 'inklandregular' !important;.

In questo modo, puoi applicare il carattere a paragrafi, intestazioni e così via. Se desideri applicare caratteri personalizzati agli elementi di testo nell'intestazione, fallo nella Modalità sviluppatore.

Applica caratteri a caratteri tematici specifici del sito

Per applicare caratteri personalizzati al tema del sito, devi sostituire gli elementi CSS specifici con il nome del carattere personalizzato. Segui le istruzioni:

1. Fai clic sul pulsante Modalità sviluppatore nella barra di navigazione.
2. Fai clic su HTML/CSS del sito e poi su site-theme.css.
3. Cerca l'intestazione o la classe di caratteri da modificare (ad esempio, H1, H2 e così via) e sostituisci la famiglia di caratteri in uso con il nome del carattere personalizzato.
4. Fai clic su Salva.
5. Fai clic su Chiudi per chiudere la modalità sviluppatore.

Applicare il carattere tramite CSS

Per impostare il carattere incorporato come carattere del tema del sito, aggiungi la seguente riga CSS a site.css. Per ulteriori informazioni sull'aggiunta di CSS personalizzati, vedi Modalità sviluppatore.

Sostituisci YOUR_GOOGLE_INTEGRATION_CODE sopra con il codice CSS della famiglia di caratteri copiato da Google Fonts. Fai clic su Salva.

Applicare il font a un widget specifico

Per applicare un font a un singolo widget:

1. Fai clic sul widget con il pulsante destro del mouse, quindi fai clic su Modifica HTML/CSS per aprire la finestra di modifica HTML/CSS del widget.
2. Sotto CSS generale o CSS specifico del dispositivo, tra parentesi {}, aggiungi il codice CSS della famiglia di font che hai salvato in precedenza nel passaggio 2.
   

Il font viene quindi applicato agli elementi di testo del widget ed è possibile utilizzare l'editor inline per modificare i colori e il testo normalmente.

Applica caratteri a caratteri tematici specifici del sito

Per applicare caratteri personalizzati al tema del sito, devi sostituire gli elementi CSS specifici con il nome del carattere personalizzato. Segui le istruzioni:

1. Fai clic sul pulsante Modalità sviluppatore nella barra di navigazione.
2. Fai clic su HTML/CSS del sito e poi su site-theme.css.
3. Cerca l'intestazione o la classe di caratteri da modificare (ad esempio, H1, H2 e così via) e sostituisci la famiglia di caratteri in uso con il nome del carattere personalizzato.
4. Fai clic su Salva.
5. Fai clic su Chiudi per chiudere la modalità sviluppatore.

Note

• Duda non supporta .woff2.
• Fai attenzione a come vengono visualizzati i glifi nella versione web del carattere. Molti caratteri personalizzati, infatti, presentano più versioni dei glifi. Assicurati che il tuo carattere venga visualizzato correttamente prima di applicarlo al sito pubblicato.
• I caratteri personalizzati possono rallentare le prestazioni del sito e aumentare il tempo di caricamento perché devono essere scaricati prima di poterli visualizzare. In genere, i siti Duda caricano le pagine molto rapidamente, ma è inevitabile che la velocità di caricamento si riduca se si caricano altri caratteri sul sito. Valuta se valga la pena utilizzare comunque i caratteri personalizzati, anche se comportano un rallentamento della pagina.
• Qualora il carattere personalizzato non venga visualizzato per vari motivi, prendi in considerazione l'idea di aggiungere un carattere di fallback al CSS.
• Con Duda non è necessario utilizzare le query @media per visualizzare i caratteri solo su determinati dispositivi, ma basta aggiungere CSS personalizzati per ciascun dispositivo.
• Utilizza solo caratteri concessi in licenza per l'incorporamento web e/o per uso commerciale. Il mancato rispetto della licenza del proprietario di un carattere costituisce una violazione del diritto d'autore.