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: *)
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:
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;
}
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
The numbers 300,400... in the font-weight property indicate the weight of the font. Here is the complete list:
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
100 - thin
200 - extra light
300 - light
400 - normal
500 - medium
600 - semibold
700 - bold
800 - extra bold
900 - black
Browsers on the web display fonts slightly differently than they might look in, say, Photoshop. They usually come out a little bolder. Sometimes it's helpful to know the little tricks: you can specify, for example, a Light weight file to get a Normal font rendering.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
}
And vice versa. If you don't have a Semi-bold (600) file, specify Bold instead. That way, semi-bold headings will be displayed in bold instead of the regular body text style.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: bold;
}
If you only have one font file, you can specify it for all styles, listing them separated by commas: 300,400,500,600,700
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).
