Questa guida spiega come utilizzare l'API Google Fonts per aggiungere caratteri al tuo sito web pagine. Non devi fare alcuna programmazione; devi solo aggiungere un'etichetta del foglio di stile con il link al documento HTML, quindi fai riferimento al carattere in uno stile CSS.
Un esempio rapido
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>
Poi apri il file in un browser web moderno. Dovresti vedere una pagina con le nel carattere chiamato Tangerine:
Questa frase è un testo normale, quindi puoi modificarne l'aspetto utilizzando CSS. Prova aggiungendo un'ombra allo stile nell'esempio precedente:
body { font-family: 'Tangerine', serif; font-size: 48px; text-shadow: 4px 4px 4px #aaa; }
A questo punto 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 a un foglio di stile per richiedere i caratteri web desiderati:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Font+Name">
Applica uno stile a 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 utilizzare, consulta la sezione Google Fonts.
Specificare famiglie e stili di caratteri nell'URL di un foglio di stile
Per determinare quale URL utilizzare nel link del foglio di stile, inizia con la URL di base dell'API Fonts:
https://fonts.googleapis.com/css
Poi aggiungi il parametro URL family=, con una o più famiglie di caratteri e
stili.
Ad esempio, per richiedere 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 Arancione Inconsolata e Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
La richiesta di più caratteri consente di utilizzarli nella pagina. (Ma non esagerare; la maggior parte delle pagine non ha bisogno di molti caratteri e la richiesta di un molti caratteri possono rallentare il caricamento delle pagine.)
L'API Google Fonts fornisce la versione standard dei caratteri richiesti
predefinito. Per richiedere altri stili o pesi, aggiungi i due punti (:) al nome
il carattere, seguito da un elenco di stili o pesi separati da virgole (,).
Ad esempio:
https://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans
Per sapere quali stili e spessori sono disponibili per un determinato carattere, vedi la sezione elenco dei caratteri in Google Fonts.
Per ogni stile richiesto, puoi fornire il nome completo o abbreviazione; Per le ponderazioni, puoi in alternativa specificare una ponderazione numerica:
| Stile | Specificatori |
|---|---|
| corsivo | italic o i |
| grassetto | bold o b o una ponderazione numerica come 700 |
| grassetto corsivo | bolditalic o bi |
Ad esempio, per richiedere il grassetto per Cantarell e Droid Serif, puoi utilizzare 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 visualizzazione caratteri
font-display ti consente di
controllare cosa succede quando il carattere non è disponibile. Specificare un valore diverso
rispetto al valore predefinito di auto è solitamente appropriato.
Passa il valore desiderato nel parametro display della stringa di query:
https://fonts.googleapis.com/css?family=Roboto&display=swap
Specificare i sottoinsiemi di script
Alcuni caratteri presenti in Google Font Directory supportare più scritture (ad esempio latino, cirillico e greco). Nell'ordine per specificare quali sottoinsiemi devono essere scaricati, il parametro sottoinsieme aggiunto all'URL.
Ad esempio, per richiedere il sottoinsieme Cirillico del Carattere Roboto Mono, l'URL dovrebbe potrebbe essere:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic
Per richiedere il sottoinsieme greco del Carattere Roboto Mono, l'URL dovrebbe potrebbe essere:
https://fonts.googleapis.com/css?family=Roboto+Mono&subset=greek
Per richiedere i sottoinsiemi sia del nome greco sia di quello cirillico Carattere Roboto Mono, l'URL dovrebbe potrebbe essere:
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 sottoinsieme viene ignorato, il browser selezionerà tra i sottoinsiemi supportato dal carattere per ottenere ciò di cui ha bisogno per il rendering del testo.
Per un elenco completo dei caratteri e sottoinsiemi di caratteri disponibili, vedi Google Fonts.
Ottimizzazione delle richieste di caratteri
Spesso, per utilizzare un carattere web sul sito web o nell'applicazione, sapere in anticipo quali lettere avrai bisogno. Questo si verifica spesso quando utilizzi un carattere web in un logo o un'intestazione.
In questi casi, ti consigliamo di specificare un valore text= nel carattere
URL di richiesta. In questo modo Google può restituire un file dei caratteri ottimizzato per
richiesta. In alcuni casi, questo può ridurre le dimensioni del file dei caratteri fino al 90%.
Per utilizzare questa funzionalità, aggiungi semplicemente text= alle tue richieste API Google Fonts. Per
esempio, se utilizzi solo Inconsolata per il titolo del tuo blog, puoi inserire
il titolo stesso come valore di text=. Ecco come apparirebbe la richiesta
come:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello
Come per tutte le stringhe di query, devi eseguire la codifica URL del valore:
https://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World
Questa funzione funziona anche per i caratteri internazionali, consentendoti di specificare UTF-8 caratteri. Ad esempio, ¡Hola! è rappresentato come:
https://fonts.googleapis.com/css?family=Inconsolata&text=%c2%a1Hola!
Attivazione degli effetti dei caratteri (beta)
Quando crei intestazioni o testi visualizzati sul tuo sito web, spesso ti consigliamo di stilizzare il 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 testo di visualizzazione accattivante. Ad esempio:
Per utilizzare questa funzionalità beta, aggiungi effect= a Google Fonts
API richiesta e aggiungi il nome della classe corrispondente agli elementi HTML che
che desideri influire. Nell'esempio precedente, abbiamo utilizzato l'effetto carattere shadow-multiple,
quindi la richiesta avrebbe questo aspetto:
https://fonts.googleapis.com/css?family=Rancho&effect=shadow-multiple
Per utilizzare l'effetto, aggiungi il nome della classe corrispondente agli elementi HTML. La
il nome della classe corrispondente è sempre il nome dell'effetto preceduto dal prefisso font-effect-,
quindi il nome del corso per shadow-multiple sarà 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
Ecco un elenco completo di tutti gli effetti dei caratteri disponibili:
| Effetto | Nome API | Nome corso | Assistenza |
|---|---|---|---|
| Anaglifo | anaglyph |
font-effect-anaglyph |
Chrome, Firefox, Opera, Safari |
| Segno di mattoni | brick-sign |
font-effect-brick-sign |
Chrome, Safari |
| Stampa su tela | canvas-print |
font-effect-canvas-print |
Chrome, Safari |
| Crackare | crackle |
font-effect-crackle |
Chrome, Safari |
decaying |
font-effect-decaying |
Chrome, Safari | |
| Distruzione | destruction |
font-effect-destruction |
Chrome, Safari |
| Sofferenza | 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 antincendio | 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 |
| Schema | outline |
font-effect-outline |
Chrome, Firefox, Opera, Safari |
| Verde | putting-green |
font-effect-putting-green |
Chrome, Safari |
| Acciaio svasato | scuffed-steel |
font-effect-scuffed-steel |
Chrome, Safari |
| Multiplo ombra | shadow-multiple |
font-effect-shadow-multiple |
Chrome, Firefox, Opera, Safari |
| Spinterizzato | 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 |
| Numero in virgola mobile 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 definire lo stile dei caratteri e molte cose sono possibili tramite CSS. Ti forniamo solo alcune idee per iniziare. Per ulteriori informazioni idee, prova la ricerca su Google "effetti di testo CSS" e sfoglia molte delle idee già disponibili sul Web.
Per approfondire
- Consulta un elenco completo delle famiglie di caratteri fornite dall'API Google Fonts su Google Fonts.
- Scopri come utilizzare il Caricatore caratteri web per avere un maggiore controllo sul caricamento dei caratteri.
- Scopri di più sul funzionamento dell'API Google Fonts nella Considerazioni tecniche.