3.1 Web Font
Collegare i font sulle pagine web è fondamentale per creare un design unico e attraente. I Web Font permettono di utilizzare font che non sono installati sul computer dell'utente, grazie al loro caricamento dal server. Google Fonts è uno dei servizi più popolari per utilizzare i Web Font. Vediamo più nel dettaglio come collegare i Web Font e Google Fonts alle pagine web.
Web Font sono font che vengono scaricati da un server remoto e visualizzati sulla pagina web, anche se non sono installati sul dispositivo dell'utente. Questo offre una maggiore flessibilità nella scelta dei font e consente di creare un design più attraente.
Collegare i Web Font
Ecco un esempio di connessione dei Web Font tramite @font-face:
Inizia caricando i file dei font sul tuo server. Di solito si tratta di file nei formati .woff, .woff2,
.ttf, .eot e .svg.
Passo 2. Utilizzo di @font-face in CSS:
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
Vantaggi dell'uso di @font-face:
- Controllo: controllo completo sulla scelta e l'uso dei font
- Compatibilità: supporto per vari formati di font per garantire la compatibilità con diversi browser
- WOFF (Web Open Font Format): formato ampiamente supportato per i Web Font
- WOFF2: versione migliorata di WOFF con migliore compressione
- TTF (TrueType Font): formato standard per i font, supportato dalla maggior parte dei browser
- EOT (Embedded OpenType): formato supportato da Internet Explorer
- SVG: formato per l'uso di font nella grafica SVG
3.2 Google Fonts
Google Fonts offre una collezione di font gratuiti che possono essere facilmente integrati nel tuo sito web. Il vantaggio di usare Google Fonts è la semplicità di connessione e la varietà di font disponibili.
Connessione dei font tramite Google Fonts:
1. Scelta del font sul sito di Google Fonts:
Vai su Google Fonts e scegli il font che desideri utilizzare.
2. Ottenere il link di connessione:
Nella pagina del font scelto, seleziona i pesi e gli stili desiderati. Successivamente, Google Fonts genererà un link per connettere il font.
3. Inserimento del link nel documento HTML:
Copia il link generato e inseriscilo nella sezione <head> del tuo documento HTML.
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. Applicazione del font in CSS:
Usa la proprietà font-family per applicare il font agli elementi della pagina.
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
Esempio di uso di Google Fonts tramite HTML:
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>Questo testo è visualizzato con il font Roboto.</p>
</body>
</html>
3.3 Uso di CSS @import
È possibile connettere i font di Google anche usando la regola @import in CSS.
Esempio di uso di Google Fonts tramite @import:
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
Vantaggi dell'uso di Google Fonts:
- Semplicità d'uso: facile integrazione dei font con una sola riga di codice
- Grande varietà: accesso a una grande quantità di font di diversi stili e categorie
- Ottimizzazione delle prestazioni: i font vengono caricati dai server ad alte prestazioni di Google
L'attributo display="swap" nel codice per collegare i Web Font di Google Fonts migliora le prestazioni e l'esperienza utente. Quando colleghi i Web Font, il browser deve prima caricare e visualizzare il font, prima di poter mostrare il testo. Questo può causare ritardi, specialmente con connessioni lente. display="swap" risolve questo problema, istruendo il browser a utilizzare un font di sistema predefinito mentre il Web Font viene caricato. Una volta che il Web Font è caricato, il browser lo sostituirà al font di sistema.
Impatto sulle prestazioni:
Quando si usano i Web Font, è importante considerare il loro impatto sulle prestazioni della pagina web. Caricare un gran numero di font o pesi può aumentare il tempo di caricamento della pagina. Per minimizzare questo impatto, segui le seguenti raccomandazioni:
- Usa il minimo indispensabile di pesi: scegli solo i pesi di cui hai davvero bisogno
- Usa l'attributo
display="swap": assicura che il testo venga visualizzato con un font di sistema mentre il Web Font viene caricato, migliorando la percezione delle prestazioni da parte dell'utente - Ottimizza la consegna dei font: usa caching e preload per migliorare le prestazioni
GO TO FULL VERSION