Collection of free CSS font variable effect code examples from Codepen and other resources

Haikyuu Variable Font

Curved Dusseldot - Variable Fonts

Work/Life - Variable Fonts animation

Christmas Candy Cane Text Effect with FS Pimlico

Cookie Variable Font with This Man is a Monster

Voice Activated Dragon Fire with Variable Fonts

A dragon who breathes fire lights up a campfire when you say the command "Incendio". You can either do this using the less fun way of "clicking the button" or you can click "Use a spell" and say the words "Incendio" to trigger the "spell".

Variable Fonts Experiment

Variable Font Light Sensor

A variable font example using the ambient light sense to adjust the variation based on the brightness or darkness of the light detected by your device.

Layered & Variable Font

FF Meta Variable Font

An explanation of Variable Fonts, what they do, why they matter, and in general an attempt to show off a beautiful, classic typeface design by Erik Spiekermann now in variable form from Monotype.

"Draw In" Text Effect with Decovar

Creating a "draw in" text effect with Decovar variable fonts. This uses a special version of Decovar that has a couple of letters set up to "draw in". No JS, Canvas or SVG required, this demo uses HTML, CSS and variable fonts.

Variable Fonts Simple

A simple variable font example using Gingham font.

Abstract Editable Layered Variable Font Effect

Growing Grassy Text with Variable Fonts

CSS Only Variable Font Using Decovar Regular

Layered Fonts in CSS