Come fare per includere i Google Fonts in locale, scaricandoli

Come fare per includere dei font esterni nella nostra pagina web?

Può capitare di voler includere i Google Fonts in locale, senza avvantaggiarsi dei comodi link forniti da Google.
Oppure abbiamo la necessità di creare un programma offline, come una app, dunque che possa funzionare anche senza connessione a internet.
Come fare dunque?

Per prima cosa scarichiamo i font in questione. In modo da poter includere i Google Fonts in locale.
Una volta scaricati non ci resta che salvarli nella directory del nostro progetto.
Una volta salvati includerli e utilizzarli è semplicissimo!
L’unica cosa che dovremmo fare e includerli via CSS tramite @font-face per poi utilizzarli.
Un esempio:

/* Includo il font in questione, in questo caso salvato nella cartella fonts che si trova nella stessa directory del file css */
@font-face
{
    font-family: FontBellissimo; /* Nome che voglio usare per il font */
    src: url("fonts/EncodeSansSemiCondensed.ttf"); /* Percorso del font */
}
/* Uso il font aggiunto per il titolo */
h1#Titolo
{
    font-family: "FontBellissimo";
}

Come vedete includere i font è uno scherzo!

Includere i font: andiamo nel dettaglio!

L’esempio di sopra è davvero semplice e aiuta a capire quanto sia semplice includere i font tramite CSS.
In una situazione reale però questo non basta: c’è il weigth del carattere, lo stile (sottolineato, italic..) e molto altro.
Quindi come fare?
Anche in questo caso Google ci fornisce un valito aiuto. Ecco la procedura passo per passo:

• Andiamo sul sito Google Fonts
• Scegliamo un carattere a aggiungiamolo cliccando su “+” in alto a destra
• Apriamo la tendina inferiore e andiamo su Customize, effettuiamo il check delle varie modalità che ci interessano
• Clicciamo poi sull’iconcina per effettuare il download e estraiamo la cartella.
• Sempre nella tendina inferiore copiamo e apriamo nel browser il link dell’elemento css da includere (es. https://fonts.googleapis.com/css?family=Roboto)

Come vedete il lin ci aprirà un file CSS con tutte le direttive che dobbiamo includere per la configurazione che abbiamo scelto.
Facciamo il copia e incolla del file aperto nel browser su un nostro file che verrà incluso nella pagina e procediamo come segue:

1. Per ogni font-face eliminiamo la proprietà “unicode-range”
2. Eliminiamo anche le proprietà “src”, “local” e “url”
3. Inseriamo per ciascun @font-face la proprieta “url” che fa riferimento al file corrispondente. Di seguito un esempio:

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("percorso/per/fonts/Roboto-Normal.ttf");
}

Spero ti sia utile.
Buon lavoro!!!
 
Magari ti interessa una guida per creare delle semplici animazioni per il vostro sito?