Come collegare i font usando il file CSS
La connessione di file tramite il tuo CSS richiede esperienza nella scrittura di codice CSS e il tuo server per archiviare il file.
La prima cosa di cui hai bisogno sono i file di font WOFF.
Puoi ottenerli acquistando un font da un servizio di font, ad esempio myfonts.com. Al momento dell'acquisto, scegli la licenza "WEB" in modo da poterla utilizzare online.
Inserire file di font sul Web
È possibile scegliere qualsiasi server o servizio CDN per l'inserimento dei file. La cosa principale è che il server deve supportare Access-Control-Allow-Origin CORS per la distribuzione a qualsiasi dominio. (Access-Control-Allow-Origin: *)
Puoi ottenerli acquistando un font da un servizio di font, ad esempio myfonts.com. Al momento dell'acquisto, scegli la licenza "WEB" in modo da poterla utilizzare online.
Inserire file di font sul Web
È possibile scegliere qualsiasi server o servizio CDN per l'inserimento dei file. La cosa principale è che il server deve supportare Access-Control-Allow-Origin CORS per la distribuzione a qualsiasi dominio. (Access-Control-Allow-Origin: *)
Se si ospitano file sul proprio server
Crea un file .htaccess nella radice del sito web e aggiungi il seguente codice:
Crea un file .htaccess nella radice del sito web e aggiungi il seguente codice:
Set di intestazioni Access-Control-Allow-Origin "*" Crea il tuo file CSS e posizionalo sul tuo server o servizio CDN.
Come creare un file CSS
Di seguito è riportato un esempio di come è scritto CSS. Puoi crearlo in un normale editor di testo, salvarlo con un'estensione .css e quindi caricarlo su un server o CDN.
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normale;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: grassetto;
}
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Medium.woff') format('woff');
font-weight: 400;
font-style: normale;
}
@font-face {
font-family: 'Gerbera';
src: url('http://yoursite.com/gerbera/Gerbera-Bold.woff') format('woff');
font-weight: 700;
font-style: grassetto;
}
Come usare i CSS
I numeri 300.400... Nella proprietà font-weight indicare lo spessore del font. Ecco l'elenco completo:
100 - sottile
200 - extra leggero
300 - luce
400 - normale
500 - medio
600 - Semigrassetto
700 - grassetto
800 - extra grassetto
900 - nero
I browser sul Web visualizzano i font in modo leggermente diverso da come potrebbero apparire, ad esempio in Photoshop. Di solito escono un po 'più audaci. A volte è utile conoscere i piccoli trucchi: è possibile specificare, ad esempio, un file Light weight per ottenere un rendering dei font Normal.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normale;
}
E viceversa. Se non disponete di un file Semi-grassetto (600), specificate invece Grassetto. In questo modo, i titoli semi-grassetto verranno visualizzati in grassetto anziché nel normale stile del corpo del testo.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: grassetto;
}
Se hai un solo file di font, puoi specificarlo per tutti gli stili, elencandoli separati da virgole: 300,400,500,600,700
100 - sottile
200 - extra leggero
300 - luce
400 - normale
500 - medio
600 - Semigrassetto
700 - grassetto
800 - extra grassetto
900 - nero
I browser sul Web visualizzano i font in modo leggermente diverso da come potrebbero apparire, ad esempio in Photoshop. Di solito escono un po 'più audaci. A volte è utile conoscere i piccoli trucchi: è possibile specificare, ad esempio, un file Light weight per ottenere un rendering dei font Normal.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Light.woff') format('woff');
font-weight: 300;
font-style: normale;
}
E viceversa. Se non disponete di un file Semi-grassetto (600), specificate invece Grassetto. In questo modo, i titoli semi-grassetto verranno visualizzati in grassetto anziché nel normale stile del corpo del testo.
@font-face {
font-family: 'Museo Sans';
src: url('http://yoursite.com/museo/MuseoSans-Bold.woff') format('woff');
font-weight: 500;
font-style: grassetto;
}
Se hai un solo file di font, puoi specificarlo per tutti gli stili, elencandoli separati da virgole: 300,400,500,600,700
Torna a Tilda. Impostazioni del sito → caratteri e colori → il tuo carattere. Incolla il link al file CSS. Aggiungete il nome del font come specificato nel file CSS.
Salva e ripubblica tutte le pagine.
Importante: vedrai il tuo carattere solo quando pubblichi il sito web. Nella modalità Modifica o Anteprima, non è possibile collegare alcun file CSS di terze parti, il che significa che il carattere non sarà visibile (questo viene fatto per motivi di sicurezza).
