Come avrete notato, qui su questo sito, uso un font personalizzato (ubuntu) e lo us(av)o sfruttando Google Fonts.
Tuttavia, come probabilmente già sapete, durante il caricamento di una pagina, ogni richiesta ad una fonte esterna causa inevitabilmente un rallentamento nell’apertura della pagina stessa, e quindi sarebbe bene, quando possibile, evitare troppe richieste esterne e ospitare (hostare) il tutto direttamente sul proprio server.
Ma come fare con Google Fonts?
È possibile salvare il tutto, caricare i file sul proprio sito, evitare dunque un’inutile richiesta esterna, e migliorare il caricamento della pagina?
Sì, possiamo farlo, e non è nemmeno troppo complicato 😉
- Andiamo qui: https://google-webfonts-helper.herokuapp.com/fonts
- Scriviamo, in alto a sinistra, il nome del font desiderato: Nel mio caso Ubuntu
- Procediamo come da immagini:
Quindi scarichiamo i nostri fonts, e carichiamoli via ftp sul nostro percorso:
Abbiamo praticamente finito!
Non ci rimane altro da fare che integrare il css prodotto (finestra principale, punto 3: copy CSS) nel file css del nostro template o creare un nuovo file css da integrare nei meta della nostra pagina, ad esempio:
<linkhref='//example.com/miofile.css'rel='stylesheet'type='text/css'>
Bene, il nostro font è correttamente installato!
Ma come attivarlo, ad esempio, per tutto l’intera pagina (tutto il body)?
body { font-family:"Ubuntu",sans-serif; }
Adesso è tutto!
Se desiderate altri dettagli su Google Fonts (ad esempio, come usarli solo su una parte della pagina, su un titolo, su uno specifico div), leggete questo articolo:
https://www.laltroweb.it/mondo-webmaster/come-usare-google-fonts-r100/