Crea siti web più accattivanti con Google Fonts

0
52

I fonts sono una delle componenti più importanti per creare un design di successo. Ultimamente si vedono molto più spesso i siti web con uno stile minimale dove la tipografia è la parte che risalta di più.

In passato per i siti web venivano utilizzati fonts standard come Arial, Verdana, Times new roman, Tahoma, Trebuchet, Georgia che rendevano il sito web poco accattivante.

Trovare dei fonts che siano gratuiti e accattivanti è molto difficile. La maggior parte dei fonts che si trovano sono a pagamento e quelli gratuiti sono di bassa qualità e sopratutto non sono indicati per i siti web.

Come sempre Google è nostro amico ed ha creato Google Fonts, un servizio che raccoglie centinaia di fonts open source ottimizzati per il web, permettendo d’incorporarli facilmente nei propri siti web.

Google Fonts permette di filtrare i fonts attraverso diverse categorie:

  • Serif (caratteri con grazie)
  • Sans Serif (caratteri senza grazie)
  • Display (caratteri con forme)
  • Handwriting (scrittura a mano)

Come utilizzare Google Fonts?

Per utilizzare i fonts di Google Fonts è necessario cliccare nel pulsante “Add to collection” alla destra dei fonts che più ci piacciono.

google-web-fonts-1

In basso verranno elencati tutti i fonts che aggiungeremo nella nostra collezione. Non appena abbiamo finito di scegliere i fonts sarà necessario cliccare sul pulsante “Use” nel lato destro dello schermo.

google-web-fonts-2

Si aprirà una schermata che permetterà di selezionare quale stile importare e la famiglia di caratteri, nonchè i passi da seguire per l’importazione. Più stili importiamo e più il peso della pagina aumenterà, quindi è consigliabile selezionare solamente quelli che utilizzerete nei vostri progetti.

google-web-fonts-3

Ci sono 3 modalità di importazione dei font: Standard, @import, Javascript.

L’ultimo passo consiste nel collegare il font alla regola Css nel foglio di stile.

google-web-fonts-4Alla prossima!

 

 

 

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here