Come usare i Google Font in un file CSS

Se stai cercando il modo di importare un Google font all'interno del tuo foglio di stile CSS, sei arrivato nel posto giusto. Per poter iniziare a usare i Google Font all'interno del tuo sito web, devi semplicemente aggiungere del semplice codice generato automaticamente dal sito web di Google Font all'interno del tuo codice HTML e del tuo foglio CSS. Questo articolo spiega come utilizzare la classe @import all'interno di un foglio di stile CSS per poter visualizzare i caratteri di Google Font all'interno di una pagina web.

Passaggi

Scarica PDF

Visita l'URL https://fonts.google.com e clicca sul font che desideri utilizzare. Scorri la lista dei caratteri disponibili, quindi clicca sul link 'Select this style o Select [nome_stile] del carattere che vuoi usare.^{[1]XFonte di ricerca}
All'interno della sezione "Use on the web" che trovi lungo il lato destro della pagina, seleziona il radio pulsante "@import". Adesso noterai che nel riquadro sottostante è apparso del codice HTML. Copia semplicemente il codice compreso fra i tag <style></style>. Per esempio @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');.
Se stai utilizzando un foglio di stile CSS separato, dovrai aprire il file CSS corrispondente usando un editor di testo. Se invece stai gestendo lo stile del tuo sito web direttamente dal codice HTML, allora dovrai aprire il documento HTML corrispondente alla pagina in cui desideri visualizzare il font in esame.
4
Incolla il codice che hai copiato all'interno del tuo file. Se stai modificando un foglio di stile CSS, incolla il codice della classe @import nella sezione iniziale del file CSS, proprio nella prima riga del codice. Se invece stai lavorando direttamente su un file HTML, incolla il codice della classe @import nella sezione <style></style> che dovrebbe trovarsi nella sezione "<head>" del documento.^{[2]XFonte di ricerca}

Se stai lavorando su un file HTML, le informazioni relative al font da utilizzare dovrebbero apparire all'incirca così:
```
<!DOCTYPE html><html>  <head>    <title>Title</title>    <style>      @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');          </style>  </head>  <body>    <h1>Lorem Ipsum</h1>  </body></html>
```
Se stai usando un figlio CSS separato, il codice iniziale dovrebbe essere simile al seguente:
```
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');
```
5
Definisci uno stile usando un font di Google. Adesso che hai aggiunto il codice che serve per importare il carattere che vuoi usare, potrai definire un tuo stile per il testo che deve essere visualizzato negli elementi body e h1 delle tue pagine web. Per esempio, se vuoi che il testo mostrato nella sezione "body" della pagina utilizzi il carattere "Lora" e abbia una dimensione di 20 px, dovrai inserire il seguente codice nella sezione "<style>":
```
body {  font-family: 'Lora';  font-size: 20px;}
```
- È anche possibile modificare il colore e l'aspetto del testo usando gli attributi "color" e "font-weight".
- Se hai la necessità di usare altri effetti per enfatizzare il testo, fai riferimento alla lista completa di quelli supportati da Google Font consultabile a questo link: https://developers.google.com/fonts/docs/getting_started. Hai a disposizione migliaia di effetti e animazioni con i quali potrai formattare al meglio il testo.
6
Salva il file CSS o HTML. Dopo aver importato il carattere da usare all'interno del foglio di stile CSS o del documento HTML e salvato le modifiche, sarai pronto per ammirare il risultato del tuo lavoro. Carica la pagina web usando il browser internet. Quest'ultima importerà automaticamente il font indicato e lo visualizzerà in base agli attributi che hai indicato nello stile che hai definito.
- Puoi includere più di un font all'interno del foglio di stile CSS. In questo caso fai attenzione perché tutti i font che hai scelto di importare avranno un impatto sui tempi di caricamento delle pagine web. Per importare font multipli all'interno del foglio CSS, non dovrai fare altro che copiare il codice di importazione dal sito di Google Font all'interno dei tuoi file CSS o HTML, come mostrato nei passaggi precedenti.
Pubblicità