toolsmoah

Visualizzatore Google Fonts

Cerca e visualizza in anteprima i Google Fonts. Trova il font perfetto per i tuoi progetti web e guarda come appaiono in tempo reale.

Ricerca font
Cerca o filtra i font desiderati.
Roboto
sans-serif•18 stili
Open Sans
sans-serif•12 stili
Google Sans
sans-serif•8 stili
Noto Sans JP
sans-serif•9 stili
Inter
sans-serif•18 stili
Montserrat
sans-serif•18 stili
Roboto
Sans-serif • 18 stili
Ciao! Visualizzatore Google Fonts. La volpe marrone veloce salta sul cane pigro. 1234567890
Ottieni codice
Copia il codice per applicare i font ai tuoi progetti web.

Incolla il codice sopra all'interno del tag head del tuo file HTML.

📚 Guida completa a Google Fonts

Impara come utilizzare efficacemente i Google Fonts

🎨🎨 Cos'è Google Fonts?

Google Fonts è un servizio di font web gratuito fornito da Google.

  • Oltre 1.400 famiglie di font open source
  • Licenza gratuita per uso commerciale
  • Distribuzione globale tramite CDN veloce
  • Supporto per varie lingue e sistemi di scrittura
  • Ottimizzato per il responsive web design

⚡⚡ Come usare i font web

1. Utilizzo in HTML

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

2. Applicazione in CSS

body {
  font-family: 'Noto Sans KR', sans-serif;
}

🚀🚀 Consigli per l'ottimizzazione delle prestazioni

  • Usa font-display: swap per prevenire FOIT
  • Usa preconnect per ridurre il tempo di ricerca DNS
  • Carica selettivamente solo i pesi dei font necessari
  • Limita i set di caratteri con il parametro subset
  • Imposta fallback di font locali

Esempio di caricamento ottimizzato:

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap&subset=korean" rel="stylesheet">

📱📱 Tipografia reattiva

Impostazioni per una leggibilità ottimale su vari dispositivi:

/* 반응형 폰트 크기 */
.responsive-text {
  font-size: clamp(1rem, 2.5vw, 2rem);
  line-height: 1.6;
}

/* 디바이스별 폰트 스택 */
.font-stack {
  font-family: 
    'Noto Sans KR', 
    -apple-system, 
    BlinkMacSystemFont, 
    'Segoe UI', 
    sans-serif;
}
  • 모바일: 16px 이상 권장
  • 태블릿: 18px 이상 권장
  • 데스크톱: 20px 이상 권장

🎯🎯 Guida alla selezione dei font

Font consigliati per utilizzo:

  • Testo del corpo: Noto Sans KR, Spoqa Han Sans
  • Intestazioni: Noto Serif KR, Gowun Dodum
  • Codice: Fira Code, JetBrains Mono
  • Decorativo: Jua, Gamja Flower

Criteri di selezione:

  • Coerenza con l'identità del marchio
  • Leggibilità e accessibilità
  • Gamma di supporto multilingue
  • Prestazioni di caricamento

🔧🔧 Utilizzo avanzato

Utilizzo di font variabili:

/* Variable Font 로드 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

/* 동적 weight 조절 */
.dynamic-weight {
  font-family: 'Inter', sans-serif;
  font-weight: var(--font-weight, 400);
  font-variation-settings: 'wght' var(--font-weight, 400);
}

Utilizzo di proprietà personalizzate CSS:

:root {
  --font-primary: 'Noto Sans KR', sans-serif;
  --font-heading: 'Noto Serif KR', serif;
  --font-mono: 'Fira Code', monospace;
}

h1, h2, h3 { font-family: var(--font-heading); }
body { font-family: var(--font-primary); }
code { font-family: var(--font-mono); }

🛡️🛡️ Considerazioni sull'accessibilità

  • Rapporto di contrasto sufficiente: WCAG 4.5:1 o superiore
  • Spaziatura riga adeguata: consigliato 1.4~1.6
  • Dimensione font leggibile: minimo 16px
  • Adatto alla dislessia: considera OpenDyslexic ecc.

Esempio CSS accessibile:

.accessible-text {
  font-size: max(16px, 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: 0.1em;
}

🔍🔍 Debug e test

Verifica caricamento font:

  • Controlla i file font nella scheda Rete degli Strumenti per sviluppatori
  • Controlla i font effettivamente applicati negli stili calcolati
  • Testa il comportamento di font-display

Strumenti di misurazione delle prestazioni:

  • Google PageSpeed Insights
  • WebPageTest
  • Controlli di ottimizzazione dei font di Lighthouse

폰트 fallback 테스트:

/* 네트워크 차단 시 fallback 확인 */
font-family: 'Custom Font', 
             'Apple SD Gothic Neo', 
             'Malgun Gothic', 
             sans-serif;

💡💡 Consigli pratici

Configurazione del progetto:

  • Definisci le regole dei font nel sistema di progettazione
  • Stabilisci la strategia di caricamento dei font
  • Configura lo stack di font di fallback
  • Imposta il monitoraggio delle prestazioni

Manutenzione:

  • Gestione delle versioni dei font
  • Pulisci i pesi inutilizzati
  • Controlli regolari delle prestazioni
  • Controlla i nuovi aggiornamenti dei font