Di recente, le normative stringenti del governi per il diritto e la sicurezza deni naviganti web, lato privacy, sta assumendo nuovi scenari.
Uno tra questi è il fatto che, per evitare che Google possa risalire all’indirizzo IP di un utente usando come Trojan Horse (😅) il servizio Google Web Fonts, si debbano servire in locale tutti i fotns personalizzati.
Oggi vediamo come fare con questa guida aggiornata ai tempi attuali e quali servizi web ci possono venire in aiuto per lo scopo.
Scelta del fonts
Qui di seguito una lista dei siti che di solito uso:
- Fonts Google, devo dare spiegazioni? 🤣
- 10015.io Google Fonts Pair Finder, un utile strumento per accopiare i vari web fonts di Google
- awwwards Free Fonts, un sito che ci regala fonts molto particolari e belli
Trasformazione del font per il web
Una volta che avrete scelto il vostro font e scaricato sul vostro computer, dovrete selezionare solo il formato TTF
A questo punto andiamo su questo sito: transfonter.org
Ci aiuterà a trasformare per il web il font in pochi semplici passaggi.
Vi basterà caricare solo il font in formato .TTF e lasciare le impostazioni di default. Premete il tasto convert e scaricate il file!
A questo punto avrete il vostro web font pronto all’uso!
Vi basterà caricare una cartella sul vistro sito che contiene tutti i file del font generati e usare la regola CSS per mostrare il custom font!
@font-face {
font-family: 'Flaviotte';
src: url('Flaviotte-Regular.eot');
src: url('Flaviotte-Regular.eot?#iefix') format('embedded-opentype'),
url('Flaviotte-Regular.woff2') format('woff2'),
url('Flaviotte-Regular.woff') format('woff'),
url('Flaviotte-Regular.ttf') format('truetype'),
url('Flaviotte-Regular.svg#Flaviotte-Regular') format('svg');
font-weight: normal;
font-style: normal;
}Se per esempio caricate tutti file del font dentro ad una cartella chiamata “fonts” dovrete andare solo a modificare la path nel CSS, per esempio
@font-face {
font-family: 'Flaviotte';
src: url('fonts/Flaviotte-Regular.eot');
src: url('fonts/Flaviotte-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/Flaviotte-Regular.woff2') format('woff2'),
url('fonts/Flaviotte-Regular.woff') format('woff'),
url('fonts/Flaviotte-Regular.ttf') format('truetype'),
url('fonts/Flaviotte-Regular.svg#Flaviotte-Regular') format('svg');
font-weight: normal;
font-style: normal;
}