Font Google CSS
Google Font
Se non desideri utilizzare nessuno dei caratteri standard in HTML, puoi utilizzare Google Fonts.
I caratteri di Google sono gratuiti e hanno più di 1000 caratteri tra cui scegliere.
Come utilizzare i caratteri di Google
Basta aggiungere un collegamento speciale al foglio di stile nella sezione <head> e quindi fare riferimento al carattere nel CSS.
Esempio
Qui, vogliamo utilizzare un carattere chiamato "Sofia" da Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Risultato:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Esempio
Qui, vogliamo utilizzare un carattere chiamato "Trirong" da Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Risultato:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Esempio
Qui, vogliamo utilizzare un carattere chiamato "Audiowide" da Google Fonts:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Risultato:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Nota: quando si specifica un carattere in CSS, elencare sempre almeno un carattere di riserva (per evitare comportamenti imprevisti). Quindi, anche qui dovresti aggiungere una famiglia di caratteri generica (come serif o sans-serif) alla fine dell'elenco.
Per un elenco di tutti i font Google disponibili, visita il nostro tutorial How To - Google Fonts .
Usa più caratteri Google
Per utilizzare più caratteri Google, separa i nomi dei caratteri con un carattere pipe ( |), in questo modo:
Esempio
Richiedi più font:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Risultato:
Audiowide Font
Sofia Font
Trirong Font
Nota: la richiesta di più font può rallentare le tue pagine web! Quindi stai attento a questo.
Stile dei caratteri di Google
Ovviamente puoi dare uno stile ai Google Fonts come preferisci, con i CSS!
Esempio
Stile il carattere "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Risultato:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Abilitazione degli effetti dei caratteri
Google ha anche abilitato diversi effetti di carattere che puoi utilizzare.
Innanzitutto aggiungi all'API di Google, quindi aggiungi un nome di classe speciale all'elemento che utilizzerà l'effetto speciale. Il nome della classe inizia sempre con
e finisce con .effect=effectnamefont-effect-effectname
Esempio
Aggiungi l'effetto fuoco al carattere "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
Risultato:
Sofia on Fire
Per richiedere più effetti di carattere, separa i nomi degli effetti con un carattere pipe ( |), in questo modo:
Esempio
Aggiungi più effetti al carattere "Sofia":
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
Risultato:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect