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 diIONOS, 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 IONOS. 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 in IONOS

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 IONOS.

    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 IONOS tramite @font-face

  1. Vai alla Modalità sviluppatore nel tuo sito, apri il file site.css e incolla il seguente codice:
  2. @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;
    }
  3. 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.
  4. Copia il nome del carattere e sostituisci le due istanze di FONT-NAME nel frammento di codice sopra con il nome del carattere.
  5. Salva ed esci dalla Modalità sviluppatore.
  6. Nel pannello a sinistra, fai clic su Contenuto e poi su Contenuto del sito.
  7. Per aggiungere un pulsante al sito, fai clic su Gestisci file e poi su Seleziona nel file del carattere.
  8. 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.
  9. 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.
Attenzione

Non dimenticare di modificare i segni di chiusura, inserendo un punto e virgola alla fine dell'elenco dei file e una virgola dopo il formato .svg.

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.

Applicare un carattere al sito globale

Per applicare caratteri personalizzati a livello globale, devi sostituire gli elementi CSS specifici con il nome del font 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

  • IONOS 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 IONOS 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 IONOS, 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.