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 ttf2eot, Font2Web, FontSquirrel 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>



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 vedere come inserire e impostare correttamente un blocco Javascript/HTML, vedi qui:

    come impostare un blocco javascript

  • All'interno del blocco Javascript/HTML potrai inserire il testo sotto forma di codice HTML, indicando il font personalizzato e almeno uno o più font alternativi (in sequenza).

Per esempio:

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