W3.CSS Google Fonts
Con W3.CSS è estremamente facile aggiungere nuovi font.
- Molto facile da usare (solo CSS e HTML)
- Uso illimitato di librerie di font esterne (come Google Fonts)
- Funziona in tutti i browser moderni
Questo è Roboto
Questa è Sofia
Sofia in fiamme
Fare il Web!
Fare il Web!
Fare il Web!
Fare il Web!
Fare il Web!
Utilizzo dei caratteri Google
I caratteri di Google sono gratuiti e hanno più di 1000 caratteri tra cui scegliere.
Nella testata della tua pagina web, collega a un font di Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Quindi aggiungi il CSS su dove usarlo:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Un altro esempio
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Crea una classe di caratteri
Nella testata della tua pagina web, collega a un font di Google:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Quindi crea una classe di caratteri:
Esempio
.w3-sofia {
font-family: Sofia, cursive;
}
Nella tua pagina web, usa la classe dei caratteri:
Esempio
<p class="w3-sofia">Making the Web!</p>
Fare il Web!
Esempio
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Fare il Web!
Esempio
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Fare il Web!
Esempio
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Fare il Web!
Esempio
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Fare il Web!