Come integrare Google Fonts

Google Fonts è una raccolta di font con licenza libera, da utilizzare nei propri progetti per personalizzare un testo.

Pubblicato da ,
Ultima modifica

Le fonts di Google possono essere integrate in diversi modi, tra cui

 

@import

Per utilizzare un font tramite la regola @import è sufficiente aggiungere al proprio foglio di stile la seguente regola

@import url('https://fonts.googleapis.com/css2?family=<name+font>');

dove name+font è il nome del font, ecco alcuni esempi

/** Font  Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto');

/** Font Qwitcher Grypen */
@import url('https://fonts.googleapis.com/css2?family=Qwitcher+Grypen');

per applicare questo font ad un elemento della nostra pagina utilizziamo la sintassi seguente

.class_nane{
font-family: 'Roboto';
}

#id_name{
font-family: 'Qwitcher Grypen';
}

 

 

@font-face

Per utilizzare un font tramite la regola @font-face, scarichiamo il font utilizzando il bottone Downolad family posto in alto a destra della pagina del font

download family

il download è una cartella compressa, ad esempio il font Kadwa è composto dai seguenti file

  • Kadwa-Bold.ttf
  • Kadwa-Regular.ttf
  • OFL.txt

a questo punto salviamo i file .ttf da qualche parte nel nostro progetto, ad esempio in una cartella fonts

  • css/
    • style.css
  • fonts/
    • Kadwa/
      • Kadwa-Bold.ttf
      • Kadwa-Regular.ttf

nel file style.css utilizziamo la regola @font-face come segue

 @font-face {     
    font-family: Kadwa Bold;
    src: url(../fonts/Kadwa/Kadwa-Bold.ttf);
 }
 
 @font-face {     
    font-family: Kadwa Regular;
    src: url(../fonts/Kadwa/Kadwa-Regular.ttf);
 }

assegnando un nome qualunque al font, in questo esempio Kadwa Bold al font Kadwa-Bold.ttf e così via, per applicare questo font ad un elemento della nostra pagina utilizziamo la seguente regola css

.class_nane{
font-family: 'Kadwa Bold';
}

#id_name{
font-family: 'Kadwa Regular';
}

utilizzando il nome che abbiamo dato al font nella regola @font-face nel font-family della regola css.

 

<link />

Infine utilizzando il tag html link nel seguente modo

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=<name+font>" rel="stylesheet">

dove name+font è il nome del font, ecco alcuni esempi

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Font  Roboto -->
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

<!-- Font Qwitcher Grypen -->
<link href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen" rel="stylesheet">

anche in questo caso per applicare il font a un elemento del DOM si usa la seguente sintassi

.class_nane{
font-family: 'Roboto';
}

#id_name{
font-family: 'Qwitcher Grypen';
}