To main content

Come collegare i font utilizzando il file CSS

Collegare i file tramite il proprio CSS richiede esperienza nella scrittura del codice CSS e un proprio server per memorizzare il file.
La prima cosa di cui avete bisogno sono i file di font WOFF.
Potete ottenerli acquistando un font da un servizio di font, ad esempio myfonts.com. Al momento dell'acquisto, scegliete la licenza "WEB" in modo da poterla utilizzare online.

Posizionare i file di font sul web
Potete scegliere qualsiasi server o servizio CDN per posizionare i file. L'importante è che il server supporti Access-Control-Allow-Origin CORS per la distribuzione a qualsiasi dominio. (Access-Control-Allow-Origin: *)
Se ospitate i file sul vostro server
Create un file .htaccess nella root del sito web e aggiungete il seguente codice:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Create il vostro file CSS e collocatelo sul vostro server o su un servizio CDN.
Come creare un file CSS

Di seguito è riportato un esempio di come viene scritto il CSS. È possibile crearlo in un normale editor di testo, salvarlo con estensione .css e quindi caricarlo su un server o su un CDN.
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: bold;
}
Come utilizzare i CSS
Tornare a Tilda. Impostazioni del sito → Caratteri e colori → Il proprio carattere. Incollare il link al file CSS. Aggiungere il nome del font come specificato nel file CSS.
Salvare e ripubblicare tutte le pagine.
Importante: il font sarà visibile solo quando si pubblica il sito web. In modalità Modifica o Anteprima, non è possibile collegare alcun file CSS di terze parti, il che significa che il vostro font non sarà visibile (questo per motivi di sicurezza).
Realizzato su
Tilda