Live Font Preview

Test any Google Font with custom text, size, weight, spacing and colors. Copy the CSS instantly.

48px
400
0px
1.4
Preview
The quick brown fox jumps over the lazy dog.
Generated CSS

What is a Live Font Preview Tool?

A live font preview tool lets you test typography in real time without writing any code. Pick any of the 2,000+ Google Fonts, adjust size, weight, letter spacing, and line height, and see exactly how your text will look on a website - before you commit to it in your design or stylesheet.

Who is this for?

Designers use it to quickly compare typefaces for headings and body copy. Developers use it to fine-tune CSS before adding it to a project. Anyone building a website or brand can explore Google Fonts visually, with full control over typography settings, and copy the ready-to-use CSS with one click.

How to use the Font Configurator

Click the Font Family button to open the dropdown and search across 2,000+ Google Fonts. Enter your own sample text, then use the sliders to adjust size (8px-200px), weight (100-900), letter spacing, and line height. Use the color pickers to test on any background. The Generated CSS panel updates instantly.

Google Fonts - free and open source

All 2,000+ fonts in this tool are from Google Fonts, a free and open-source font library maintained by Google. They can be used on any website via a simple CSS import - no license fees, no attribution required for most fonts. The generated CSS snippet includes the correct import line.