Abbinamento font e directory Google Fonts

Tutti gli strumenti

Sfoglia una directory curata dei Google Fonts più popolari con anteprime live, filtra per categoria e cerca per nome, poi copia il CSS pronto da incollare ed esplora gli abbinamenti di font suggeriti — tutto nel tuo browser.

Dimensione 34px

Tutto funziona nel tuo browser — i font vengono caricati da Google Fonts solo per l'anteprima live, niente viene caricato, nessuna registrazione, completamente gratuito.

Informazioni su Abbinamento font e directory Google Fonts

Questo elenco di font raccoglie 80 popolari Google Fonts in un'unica pagina ricercabile, ognuno reso come campione dal vivo con una riga di pangramma, una riga di alfabeto e numeri, e un badge di categoria. Copre cinque famiglie tipografiche — sans-serif, serif, display, corsivo a mano e monospace — così puoi confrontare le forme reali delle lettere invece di indovinare dai nomi.

Ogni scheda font include suggerimenti di abbinamento curati: font partner che funzionano bene insieme per titoli e testo del corpo. Cliccare su un chip di abbinamento apre un'anteprima che imposta un titolo in un font e un paragrafo nell'altro, così puoi giudicare la combinazione nel contesto prima di sceglierla.

Quando un font o un abbinamento ti convince, un clic copia CSS pronto da incollare — una riga @import per il foglio di stile Google Fonts più la pila font-family corrispondente con un fallback sensato. I font vengono caricati da Google Fonts solo per le anteprime dal vivo; nulla di ciò che digiti viene caricato da nessuna parte.

Come usare Abbinamento font e directory Google Fonts

  1. Sfoglia le schede font, ognuna con nome, badge di categoria e testo di esempio dal vivo impostato nel carattere effettivo.
  2. Usa la casella di ricerca per trovare un font per nome, oppure clicca su un chip di categoria (Sans-serif, Serif, Display, Corsivo a mano, Monospace) per filtrare la griglia.
  3. Trascina lo slider delle dimensioni (16–72 px) per vedere in anteprima la riga di esempio alla dimensione desiderata per titoli o testo del corpo.
  4. Clicca su un chip "Si abbina con" o sul pulsante "Anteprima abbinamento" per vedere un titolo e un paragrafo del corpo impostati nella combinazione suggerita.
  5. Clicca sul pulsante "CSS" su una scheda o nell'anteprima di abbinamento per copiare la riga @import e le dichiarazioni font-family negli appunti.

Domande frequenti

Presenta un insieme curato di 80 Google Fonts ampiamente usati distribuiti su cinque categorie: sans-serif, serif, display, corsivo a mano e monospace. Ogni chip di categoria mostra un conteggio dal vivo così puoi vedere quanti font corrispondono al filtro attuale.

Ogni font elenca uno o due font partner scelti a mano che contrastano bene con esso — tipicamente un carattere display o serif per i titoli abbinato a un font per il corpo facilmente leggibile. L'anteprima di abbinamento mostra i ruoli esatti di titolo e corpo per ogni combinazione.

Per un singolo font, ottieni una riga @import url() per l'endpoint css2 di Google Fonts (pesi regolare e grassetto) più una pila font-family con il fallback generico corretto. Per un abbinamento, ottieni entrambi gli import e dichiarazioni separate per titoli e corpo.

Sì, le anteprime dal vivo caricano i caratteri dalla CDN di Google Fonts: è l'unica richiesta esterna della pagina. Le tue ricerche, le scelte di filtro e il CSS copiato restano nel tuo browser; nulla viene caricato o memorizzato.

Sì, sfogliare, vedere in anteprima gli abbinamenti e copiare il CSS sono tutti gratuiti senza bisogno di account. I caratteri elencati sono Google Fonts, che sono a loro volta gratuiti da usare in progetti personali e commerciali sotto le loro licenze aperte.

Puoi regolare la dimensione del campione ovunque tra 16 px e 72 px con lo slider delle dimensioni, che aggiorna tutte le schede contemporaneamente. Questo rende facile confrontare i candidati esattamente alla dimensione che prevedi di usare per titoli o testo del corpo.
Condividi
Strumenti correlati
Generatore di palette colori Crea palette cromatiche armoniose da una ruota dei colori interattiva — applica regole di armonia come analogica, complementare o triade, poi copia qualsiasi valore all'istante. Gratuito
Mixer di colori Sfuma un colore di partenza verso uno finale in fino a 10 passaggi — visualizza il gradiente, cattura ogni tonalità e copia qualsiasi formato all'istante. Gratuito
Generatore di sfumature colore Genera una gamma completa di tinte e ombre da un singolo colore — scegli il passo di scurimento/schiarimento e il numero di tonalità, poi copia qualsiasi valore all'istante. Gratuito
Estrattore colori da immagine Estrai una palette raffinata e pronta da copiare da qualsiasi immagine. Gratuito
Palette di colori web-safe Sfoglia i classici 216 colori web-safe in una griglia di campioni cliccabili — ordina per tonalità o ordine cubo, filtra per esadecimale e copia all'istante qualsiasi valore HEX o rgb(). Gratuito
Generatore gradiente da immagine Estrai un gradiente bellissimo da qualsiasi foto — carica un'immagine, scegli un mood e i colori dominanti diventano stop di gradiente trascinabili. Copia il CSS pronto all'uso all'istante. Gratuito
Hai bisogno di aiuto?
Hai riscontrato un problema con questo strumento? Faccelo sapere.
Segnala un problema

Aggiungi questo strumento gratuito al tuo sito web — copia e incolla il codice qui sotto.