- 01 Font Explorer Search and filter open-source fonts, preview them with your own words and see every available weight.
- 02 Font Playground Tune size, weight, spacing, line height and colour, then copy production-ready CSS.
- 03 Font Pairing Generator Browse curated heading and body combinations with the reasoning behind each one.
- 04 Website Typography Preview Try a type system on a realistic web page with a modular scale, then export it as CSS variables.
- 05 Font Comparison Set up to four fonts side by side with identical text and measured x-height and width.
A workflow, not a pile of widgets
The tools are designed to be used together. Start in the Font Explorer to shortlist families, compare the finalists side by side in Font Comparison, and fine-tune size, spacing and colour in the Font Playground. When you need a second typeface, the Font Pairing Generator suggests combinations with an explanation for each, and the Website Typography Preview shows the result on a realistic page.
Settings travel in the page address, so you can bookmark a setup or send it to a colleague. Every tool ends with code you can paste into a website: plain CSS, an HTML <link> tag, an @import rule or a WordPress snippet.
What the tools do not do
VirtualFont does not host or sell font files. Previews load directly from Google Fonts, and the generated code points to the same service. If you prefer to host fonts yourself for privacy or performance reasons, the guide on web font loading performance explains how.