Google Font HTML per siti web

Se stai cercando un modo semplice e gratuito per migliorare l’estetica del tuo sito web, Google Fonts è una delle risorse più potenti a tua disposizione. In questo articolo, vedremo come utilizzare Google Fonts nel tuo codice HTML e perché può fare una grande differenza nel design del tuo sito.

Cos’è Google Fonts?

Google Fonts è una libreria gratuita di caratteri open source offerta da Google. Contiene centinaia di font per il web, che puoi facilmente integrare nei tuoi progetti HTML e CSS. Puoi scegliere tra font serif, sans-serif, display, handwriting e monospace, adattandoli al look & feel del tuo brand.

Perché usare Google Fonts?

✅ Gratis e open source
✅ Facile da integrare
✅ Compatibile con tutti i browser moderni
✅ Ottimizzato per il web
✅ Scelta ampia e professionale

Come Aggiungere un Font Google in HTML

1. Scegli il Font

Vai su fonts.google.com, esplora la libreria e seleziona il font che preferisci. Ad esempio, supponiamo tu scelga Roboto.

2. Copia il Link nel <head>

Google ti fornirà un tag <link> che devi incollare nella sezione <head> del tuo documento HTML:

<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>

3. Applica il Font nel CSS

Ora puoi usare il font nel tuo CSS (o direttamente in un tag <style> all’interno dell’HTML):

<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>

Oppure, se usi un file CSS esterno:

body {
font-family: 'Roboto', sans-serif;
}

Consigli Utili

  • Usa solo i pesi necessari: Quando selezioni un font, carica solo i pesi e stili che ti servono per ridurre i tempi di caricamento.

  • Combina con attenzione: Puoi combinare due font diversi (ad esempio uno per i titoli e uno per il corpo del testo), ma evita di esagerare.

  • Ottimizza la performance: Se stai caricando molti font, considera di usare font-display: swap per migliorare la velocità percepita.

Esempio Completo

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts Example</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
padding: 20px;
line-height: 1.6;
}
h1 {
font-weight: 700;
}
</style>
</head>
<body>
<h1>Ciao, Google Fonts!</h1>
<p>Questo testo utilizza il font Roboto caricato direttamente da Google Fonts.</p>
</body>
</html>

Conclusione

Integrare Google Fonts in HTML è un modo veloce ed efficace per dare personalità al tuo sito web. Che tu stia creando un blog, un portfolio o un e-commerce, una tipografia ben scelta può migliorare notevolmente l’esperienza utente e la percezione del tuo brand.