Come installare un font personalizzato nel tuo sito di funnel?

Un font personalizzato può essere usato solo da chi ha una licenza d’uso gratuito o ne ha acquistato la licenza d’uso, rilasciata dall’autore del font stesso, e può essere incorporata al di fuori del proprio sito web solo se hai una @font-face license che ti autorizza a fare ciò.

Premesso ciò, come per qualsiasi font personalizzato, puoi integrarlo nelle tue pagine di funnel utilizzando il linguaggio CSS, in particolare con la proprietà @font-face, e parallelamente ti consiglio di dichiarare anche uno o più font alternativi ma riconosciuti da tutti i browser (come Arial o Sans-Serif, per esempio) subito dopo i font personalizzati.

  • Dovrai usare la proprietà CSS @font-face, ma per risultare compatibile con tutti i browser, occorrerà indicare almeno tre formati differenti per lo stesso font: EOT, TTF e WOFF. Opzionalmente SVG e WOFF2. Trovi maggiori informazioni su internet in merito a questi formati.
  • Normalmente il font è disponibile in formato TTF. Se non hai gli altri due, per ottenerli, basta  contattare chi ti ha venduto il font per ottenere la @font-face license, oppure convertire il formato TTF avvalendoti di programmi gratuiti disponibili su internet, come per esempio ttf2eotFont2WebFontSquirrel o Google Fonts.
  • Una volta che avrai almeno i tre file necessari, dovrai caricarli nel tuo sito oppure su Google Drive o Amazon AWS S3, per esempio, possibilmente inserendoli in una cartella dedicata solo ai font.
  • A questo punto basterà dichiarare il nuovo font tramite un codice CSS da richiamare/importare o da incorporare nelle pagine del sito.
Esempio di codice CSS con proprietà @font-face:
<style type="text/css">
@font-face{
font-family: 'MyWebFont'; 
src: url('WebFont.eot'); 
src: url('WebFont.eot?#iefix') format('embedded-opentype'),      
url('WebFont.woff') format('woff'),      
url('WebFont.ttf') format('truetype'),      
} </style>
  • Se i files del font si trovassero nella cartella “font” di un sito esterno, allora l’url del font risulterebbe così:src: url(“http://urldeltuosito.com/font/nome_del_file_del_font.woff”);
  • Per maggiori informazioni su come installare un font sulle pagine web, in generale, puoi fare riferimento a questa guida online qui.

Come inserire il codice CSS su tutte le tue pagine

Una volta che avrai il codice CSS pronto da inserire, potrai incollarlo in un apposito campo in Piramid:

  • vai nel tuo pannello di controllo;
  • clicca su Impostazioni – Tutte le impostazioni – tab Global Custom Codes – campo Codice Globale dell’Header;
  • inserisci il codice CSS nel campo suddetto in modo da incorporarlo in tutte le pagine del tuo sito oppure inserisci il codice HTML che richiama il file CSS esterno, a tua scelta;
  • infine, ricorda di cliccare sul pulsante a fondo pagina Save Changes.

Come applicare il font personalizzato al testo

Per inserire il testo con font personalizzato nelle pagine, i normali blocchi di testo non sono idonei per questo scopo e occorre utilizzare il tipo di blocco Javascript/HTML.

Per esempio:
<font face=”MyWebFont, Verdana, Arial, sans-serif”>Testo con font personalizzato e caratteri simili</font>