🌙

Variable Font Finder

Discover and explore the power of variable Google Fonts. Filter to see all available variable fonts in one place.

About This Tool

Variable fonts are a modern evolution of typography, packing an entire range of styles into a single file. This tool filters the entire Google Fonts library to show you only the fonts that support variable axes like weight, slant, or width, giving you a curated gallery of the most flexible typefaces available for the web.

How to Use

  1. The page automatically loads and displays all fonts identified as 'variable' from the Google Fonts API.
  2. Scroll through the grid of font cards to see a preview of each variable font.
  3. Click on any font card that interests you.
  4. You will be taken to that font's official Google Fonts specimen page, where you can interact with its unique variable sliders.

Frequently Asked Questions (FAQs)

What is a variable font?

A variable font is a single font file that behaves like multiple fonts. It contains a range of design variations (axes), such as weight or slant, which can be smoothly interpolated, offering infinite stylistic possibilities with a smaller file size.

How can I use variable fonts on my website?

You use them with CSS, similar to regular web fonts, but with the added ability to control their axes using the `font-variation-settings` property. The Google Fonts specimen page provides the necessary CSS code.

Is browser support for variable fonts good?

Yes, all modern evergreen browsers (Chrome, Firefox, Safari, Edge) have excellent support for variable fonts.