@font-face è una regola CSS che consente di visualizzare i font nelle pagine web di Internet. Prima di questa regola, i webmaster potevano utilizzare sui loro siti un insieme limitato di font, i più comuni e installati sui computer degli utenti. Con l'avvento di @font-face, qualsiasi font specifico può essere facilmente allegato a un sito web.
Se avete scaricato il font sul nostro sito, nell'archivio con i font troverete un codice CSS già pronto che deve essere copiato e inserito nel documento CSS allegato al progetto.
Installazione passo per passo
1. Selezionare il font desiderato e fare clic su "download for website".
2. Nella root del vostro sito create una cartella fonts e copiate i font scaricati.
Aprite il vostro documento CSS e copiate il contenuto del file di testo dall'archivio.
4. Assicuratevi che il percorso della cartella dei font sia scritto correttamente. A seconda della posizione della cartella in cui si trovano i font, il percorso può contenere uno o più punti.
5. Fatto. Copiate la proprietà con il nome della famiglia e incollatela nel selettore per il quale state scrivendo gli stili.
E se ho già scaricato il font altrove e voglio inserirlo?
In questo caso, è necessario trovare un convertitore di font su Internet e convertire il font ttf (o otf) nei formati giusti, ovvero eot, svg, woff e woff2. Questo per garantire che il font venga visualizzato e funzioni correttamente in tutti i browser e sui dispositivi mobili.
È quindi necessario scrivere da soli la regola @font-face, rispettandone la sintassi.
La sintassi di @font-face
La sintassi della regola può essere suddivisa grossolanamente in proprietà di base e proprietà avanzate.
Base:
- font-family - specifica il nome del font.
- src - indica il percorso del font. Può trattarsi dell'URL del font che si trova sul server del vostro sito web, di URL di font che si trovano sul server di qualcun altro (come Google Fonts), o semplicemente del nome del font che si trova sul computer dell'utente (Helvetica New Bold, Tahoma, Georgia, ecc.).
Espanso:
- font-display - determina il modo in cui il font apparirà, a seconda che sia stato scaricato e sia pronto per l'uso.
- font-stretch - consente di regolare la larghezza del testo.
- font-style - determina se il carattere è semplice, corsivo o inclinato (questi ultimi due non sono uguali).
- font-weight - Imposta la saturazione del carattere, su una scala da 100 a 900 (100-piccolo, 900-piccolo).
- font-variant - determina come devono essere presentate le lettere minuscole: lasciale immutate o rendile tutte minuscole (maiuscole).
- font-feature-settings - permette di gestire le caratteristiche tipografiche avanzate dei font OpenType.
- font-variations-settings - permette di controllare a basso livello le variazioni dei font Open Type e TrueType specificando i nomi degli assi di quattro lettere.
- unicode-range - specifica la gamma di codici Unicode (glifi) da utilizzare nel font.
Collegare un font al vostro sito con Google Fonts
L'utilizzo di Google Fonts è il modo più semplice per collegare un font al vostro sito web. Andate sul loro sito, trovate il font che desiderate, scegliete il font giusto da installare e copiate il codice.
Il codice copiato deve essere inserito nel corpo del tag head, nella pagina html.
Lo svantaggio di questo metodo è che se durante il make-up del sito si perde internet - i font non verranno visualizzati e sostituiti da quelli standard perché i file non si trovano sul computer locale, ma sui server di Google. Inoltre, è probabile che quando ci si reca dal cliente per la presentazione del layout (o anche solo per la conformazione) e questi non ha la connessione Wi-Fi, il problema si ripresenterà.
