Come utilizzare Google Fonts in HTML e CSS

Ci sono numerosi caratteri disponibili in HTML e CSS ma se non sei soddisfatto dei caratteri HTML/CSS standard e optare per alcuni nuovi, nuovi e più recenti caratteri, puoi utilizzare Google Fonts. Google Font è la biblioteca online di Google che ci consente di utilizzare diverse famiglie di caratteri tramite CDN (acronimo della rete di consegna dei contenuti) che è gratuito per tutti.

Questo articolo ti guiderà nei seguenti aspetti relativi ai caratteri di Google:

• Guida passo per passo per Google Fonts
• Come utilizzare vari caratteri di Google
• Come modellare i caratteri di Google

Guida passo per passo per Google Fonts

Per utilizzare i caratteri di Google devi seguire i seguenti passaggi:

Primo passo
Visita il sito ufficiale di Google Fonts e la seguente finestra apparirà:

Secondo passo
Seleziona la famiglia di categoria/ carattere a scelta:

Terzo passo
Seleziona il carattere Google di tua scelta (E.G. quintessentia):

Ora fai clic su "Seleziona questo stile":

Quarto passo
Copia il collegamento dello stile selezionato dalla finestra che appare sul lato destro dello schermo:

Incolla il collegamento nella sezione principale del documento HTML:

Quinto passo
Copia le regole CSS per la famiglia del carattere

E incollalo nel file CSS:

Vogliamo applicare lo stile sul

elemento così lo incollamo nel selettore P. Ora otterremo il seguente output:

L'output mostra che un carattere di Google "per Quintessential" è implementato sul

elemento con successo.

Come utilizzare vari caratteri di Google

Tutta la procedura sarà la stessa, selezionare i più caratteri Google, copiare il collegamento e incollarlo nella sezione Head del file HTML:

Html

Caratteri CSS

Primo paragrafo

Secondo paragrafo

CSS

Ora selezioniamo due diversi caratteri di Google I.e. "Concorrente" e "Open sans", vogliamo usare "Consolatore" per il

elemento e "sans aperto" per il

elementi. Quindi, il nostro CSS sembrerà così:

H3
Font-Family: "Consolatore", corsivo;

P
Font-Family: "Open sans", sans-serif;

Nel file CSS, incolla le regole CSS nei selettori di elementi per modellarle in base alla scelta. Produrrà la seguente uscita:

L'output dimostra che le regole CSS sono implementate con successo sugli elementi HTML.

Come modellare i caratteri di Google

Con l'aiuto delle proprietà CSS possiamo modellare i caratteri di Google in base alla nostra scelta, il nostro file HTML rimarrà lo stesso e il file CSS sembrerà questo:

CSS

H3
Font-Family: "Consolatore", corsivo;
colore rosso;
text-shadow: 5px 5px 5px #83647e;

P
Font-Family: "Open sans", sans-serif;
colore rosso;
text-shadow: 5px 5px 5px #83647e;

L'output dello snippet sopra dato apparirà così:

Conclusione

Per aggiungere i caratteri di Google, cerca i caratteri di Google, seleziona la categoria e la famiglia, quindi seleziona lo stile del carattere di tua scelta. Una volta selezionato il carattere, "Copia il link carattere", dalle "finestre delle famiglie selezionate" e incollalo nella sezione testa del file HTML. Successivamente, copia le "regole CSS per i caratteri 'Link” e incollalo nel selettore CSS. Lo styling può essere aggiunto ai caratteri di Google utilizzando le proprietà CSS.