Test Font e Abbinamenti

Anteprima abbinamenti Google Fonts, spaziatura e stili.

Configurazione tipografica

Carattere del titolo

Carattere del corpo

Dimensione del titolo36px

Spessore del titolo

Dimensione del corpo16px

Spessore del corpo

Combinazioni popolari

Tech modernoPoppins + InterEditoriale classicoPlayfair Display + LoraCorporate audaceMontserrat + Open SansMonospace pulitoJetBrains Mono + RobotoNotizie caldeMerriweather + Lato

Esporta codice CSS

/* CSS Integration */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lora:wght@400;700&display=swap');

h1.custom-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 36px;
}

p.custom-body {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 16px;
}

Come funziona

Scegli i Google Fonts da abbinare e visualizzare in anteprima.
Digita il tuo testo nell'anteprima in tempo reale e modificabile.
Regola dimensione, spessore e spaziatura per testare la tipografia.
Esporta il CSS per usare l'abbinamento nel tuo progetto.

A cosa serve

Provare un abbinamento titolo/corpo prima di sceglierlo.
Vedere in anteprima come appare un testo reale in un font.
Ottenere il CSS per incorporare un abbinamento di Google Fonts.

Da sapere

Carica i font da Google Fonts, quindi visualizzare in anteprima un font lo scarica da Google (l'unico punto in cui questo strumento non è completamente offline).
Il rendering può differire leggermente tra sistemi operativi e browser.

Domande frequenti

Usa il mio testo?

Sì: l'anteprima è modificabile, quindi puoi incollare titoli e paragrafi reali invece di testo segnaposto.

Posso ottenere il CSS?

Sì: esporta il CSS per incorporare nel tuo sito l'abbinamento di Google Fonts scelto.

È completamente offline?

Quasi: tutto avviene nel tuo browser, ma visualizzare in anteprima un Google Font ne scarica il file da Google. Nessun testo che digiti viene caricato.

Strumenti correlati

Visualizzatore DXF

Tavolozza Colori

Convertitore Colori

Generatore Box Shadow CSS

Verifica Contrasto