Come ospitare Google Fonts sul proprio sito

Come ospitare Google Fonts sul proprio sito

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 😉

  1. Andiamo qui: https://google-webfonts-helper.herokuapp.com/fonts
  2. Scriviamo, in alto a sinistra, il nome del font desiderato: Nel mio caso Ubuntu
  3. Procediamo come da immagini:

google_fonts_ubuntu

Quindi scarichiamo i nostri fonts, e carichiamoli via ftp sul nostro percorso:

archivio-to-ftp.PNG

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/




Lascia un commento