Questa guida spiega come utilizzare l'API Google Fonts per aggiungere caratteri alle pagine web. Non c'è bisogno di effettuare alcuna programmazione, ma devi solo aggiungere un link al foglio di stile speciale al documento HTML, quindi fare riferimento al carattere in uno stile CSS.
Un rapido esempio
Ecco un esempio. Copia e incolla il seguente codice HTML in un file:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
Quindi apri il file in un browser web moderno. Dovresti vedere una pagina che mostra quanto segue, con il carattere Tangerine:
Quella frase è di testo normale, quindi puoi cambiarne l'aspetto utilizzando CSS. Prova ad aggiungere un'ombra allo stile nell'esempio precedente:
body {
font-family: 'Tangerine', serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
Ora dovresti vedere un'ombra sotto il testo:
E questo è solo l'inizio di ciò che puoi fare con l'API Fonts e il CSS.
Panoramica
Puoi iniziare a utilizzare l'API Google Fonts in soli due passaggi:
Aggiungi il link di un foglio di stile per richiedere i caratteri web desiderati:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Definisci un elemento con il carattere web richiesto in un foglio di stile:
.css-selector { font-family: 'Font Name', serif; }o con uno stile incorporato sull'elemento stesso:
<div style="font-family: 'Font Name', serif;">Your text</div>
Per un elenco dei caratteri che puoi usare, vedi Google Fonts.
Specificare stili e famiglie di caratteri nell'URL di un foglio di stile
Per determinare quale URL utilizzare nel link del foglio di stile, inizia con l'URL di base dell'API Google Fonts:
https://fonts.googleapis.com/css
Poi, aggiungi il parametro URL family=, con uno o più nomi di famiglie e stili di caratteri.
Ad esempio, per richiedere il carattere Inconsolata:
https://fonts.googleapis.com/css?family=Inconsolata
Per richiedere più famiglie di caratteri, separa i nomi con una barra verticale
(|).
Ad esempio, per richiedere i caratteri Tangerine, Inconsolata e Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
La richiesta di più caratteri ti consente di utilizzare tutti questi caratteri nella pagina. Non esagerare: la maggior parte delle pagine non ha bisogno di molti caratteri e la richiesta di molti caratteri può rallentare il caricamento delle pagine.
L'API Google Fonts fornisce per impostazione predefinita la versione normale dei caratteri richiesti. Per richiedere altri stili o spessori, aggiungi i due punti (:) al nome del carattere, seguiti da un elenco di stili o spessori separati da virgole (,).
Ad esempio:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Per scoprire quali stili e spessori sono disponibili per un determinato carattere, consulta l'elenco del carattere in Google Fonts.
Per ogni stile richiesto, puoi indicare il nome completo o un'abbreviazione; per le ponderazioni, puoi specificare in alternativa una ponderazione numerica:
| Stile | Identificatore |
|---|---|
| corsivo | italic o i |
| grassetto | bold o b o una ponderazione numerica come 700 |
| grassetto corsivo | bolditalic o bi |
Ad esempio, per richiedere il corsivo Cantarell e il grassetto Droid Serif, puoi utilizzare uno qualsiasi dei seguenti URL:
https://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700
Usa font-display
font-display ti consente di controllare cosa accade quando il carattere non è disponibile. In genere è appropriato specificare un valore diverso da auto predefinito.
Passa il valore desiderato nel parametro display di querystring:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Specificare i sottoinsiemi di script
Alcuni caratteri in Google Font Directory supportano più scritture (ad esempio latino, cirillico e greco). Per specificare i sottoinsiemi da scaricare, il parametro del sottoinsieme deve essere aggiunto all'URL.
Ad esempio, per richiedere il sottoinsieme cirillico del carattere Roboto Mono, l'URL sarà:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Per richiedere il sottoinsieme in greco del carattere Roboto Mono, l'URL sarà:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Per richiedere i sottoinsiemi sia in greco che in cirillico del carattere Roboto Mono, l'URL sarà:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek,cyrillic
Il sottoinsieme latino è sempre incluso se disponibile e non deve essere specificato. Tieni presente che se un browser client supporta unicode-range (http://caniuse.com/#feat=font-unicode-range), il parametro del sottoinsieme viene ignorato; il browser selezionerà tra i sottoinsiemi supportati dal carattere per ottenere ciò di cui ha bisogno per il rendering del testo.
Per un elenco completo dei caratteri disponibili e dei sottoinsiemi di caratteri, consulta Google Fonts.
Ottimizzazione delle richieste di caratteri
Spesso, quando si desidera utilizzare un carattere web sul proprio sito web o nella propria applicazione, è necessario sapere in anticipo di quali lettere si hanno bisogno. Questo problema si verifica spesso quando utilizzi un carattere web in un logo o un'intestazione.
In questi casi, ti consigliamo di specificare un valore text= nell'URL di richiesta del carattere. Questo consente a Google di restituire un file dei caratteri ottimizzato per la tua richiesta. In alcuni casi, questa operazione può ridurre le dimensioni del file dei caratteri fino al 90%.
Per utilizzare questa funzionalità, basta aggiungere text= alle tue richieste API Google Fonts. Ad esempio, se utilizzi Inconsolata solo per il titolo del blog, puoi inserire il titolo stesso come valore di text=. Ecco l'aspetto della richiesta:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Come per tutte le stringhe di query, devi codificare con URL il valore:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Questa funzionalità funziona anche per i caratteri internazionali, consentendo di specificare caratteri UTF-8. Ad esempio, ¡Hola! è rappresentato come:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Attivazione degli effetti per i caratteri (beta)
Per le intestazioni o i testi visualizzati sul sito web, spesso è consigliabile applicare stili al testo in modo decorativo. Per semplificare il tuo lavoro, Google ha fornito una raccolta di effetti per i caratteri che puoi utilizzare con il minimo sforzo per produrre un testo visualizzato di qualità. Ad esempio:
Per utilizzare questa funzionalità beta, basta aggiungere effect= alla richiesta API di Google Fonts e aggiungere il nome della classe corrispondente agli elementi HTML su cui vuoi intervenire. Nell'esempio precedente, abbiamo usato l'effetto carattere shadow-multiple, quindi la richiesta avrebbe il seguente aspetto:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Per utilizzare l'effetto, aggiungi il nome della classe corrispondente agli elementi HTML. Il nome della classe corrispondente è sempre il nome dell'effetto preceduto dal prefisso font-effect-, quindi il nome della classe per shadow-multiple sarebbe font-effect-shadow-multiple:
<div class="font-effect-shadow-multiple">This is a font effect!</div>
Puoi richiedere più effetti separando i nomi degli effetti con una barra verticale (|).
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple|3d-float
Di seguito è riportato un elenco completo di tutti gli effetti per i caratteri disponibili:
| Effetto | Nome API | Nome corso | Assistenza |
|---|---|---|---|
| Anaglifo | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
| Cartello di mattoni | brick-sign |
font-effect-brick-sign |
Chrome, Safari |
| Stampa su tela | canvas-print |
font-effect-canvas-print |
Chrome, Safari |
| Grasso | crackle |
font-effect-crackle |
Chrome, Safari |
decaying |
font-effect-decaying |
Chrome, Safari | |
| Distruzione | destruction |
font-effect-destruction |
Chrome, Safari |
| Stress | distressed |
font-effect-distressed |
Chrome, Safari |
| Legno invecchiato | distressed-wood |
font-effect-distressed-wood |
Chrome, Safari |
| In rilievo | emboss |
font-effect-emboss |
Chrome, Firefox, Opera, Safari |
| Incendio | fire |
font-effect-fire |
Chrome, Firefox, Opera, Safari |
| Animazione con il fuoco | fire-animation |
font-effect-fire-animation |
Chrome, Firefox, Opera, Safari |
| Fragile | fragile |
font-effect-fragile |
Chrome, Safari |
| Erba | grass |
font-effect-grass |
Chrome, Safari |
| Ghiaccio | ice |
font-effect-ice |
Chrome, Safari |
| Mitosi | mitosis |
font-effect-mitosis |
Chrome, Safari |
| Neon | neon |
font-effect-neon |
Chrome, Firefox, Opera, Safari |
| Contorno | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
| Mettere verde | putting-green |
font-effect-putting-green |
Chrome, Safari |
| Acciaio rivestito | scuffed-steel |
font-effect-scuffed-steel |
Chrome, Safari |
| Multiplo shadow | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
| Frusciata | splintered |
font-effect-splintered |
Chrome, Safari |
| Statico | static |
font-effect-static |
Chrome, Safari |
| Stonewash | stonewash |
font-effect-stonewash |
Chrome, Safari |
| Tridimensionale | 3d |
font-effect-3d |
Chrome, Firefox, Opera, Safari |
| Float tridimensionale | 3d-float |
font-effect-3d-float |
Chrome, Firefox, Opera, Safari |
| Vintage | vintage |
font-effect-vintage |
Chrome, Safari |
| Sfondo | wallpaper |
font-effect-wallpaper |
Chrome, Safari |
Esistono molti altri modi per applicare uno stile ai caratteri e molte cose sono possibili tramite CSS. Ti proponiamo semplicemente alcune idee per aiutarti a iniziare. Per altre idee, prova a cercare su Google "effetti di testo CSS" e sfoglia tante idee già presenti sul web.
Per approfondire
- Consulta un elenco completo delle famiglie di caratteri fornite dall'API Google Fonts su Google Fonts.
- Scopri come utilizzare il caricamento dei caratteri web per avere un maggiore controllo sul caricamento dei caratteri.
- Per ulteriori informazioni sul funzionamento dell'API Google Fonts, consulta la pagina Considerazioni tecniche.