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

Related Articles

  1. CSS text-stroke Examples

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS) / JS

About a code

Haikyuu Variable Font

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • P

Made with

  • HTML / CSS (SCSS)

About a code

Curved Dusseldot - Variable Fonts

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Gayane

Made with

  • HTML / CSS

About a code

Work/Life - Variable Fonts animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS)

About a code

Christmas Candy Cane Text Effect with FS Pimlico

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Cookie Variable Font with This Man is a Monster

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS)

About a code

Cookie Variable Font with This Man is a Monster

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS) / JS

About a code

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".

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: splitting.js

Author

  • Supremo

Made with

  • HTML / CSS / JS

About a code

Variable Fonts Experiment

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: slick.css, jquery.js, slick.js

Demo image: Variable Font Light Sensor

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS) / JS

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • yoksel

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Layered & Variable Font

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jason Pamental

Made with

  • HTML / CSS (SCSS) / JS

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS)

About a code

"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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS) / JS

About a code

Variable Fonts Simple

A simple variable font example using Gingham font.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS) / JS

About a code

Abstract Editable Layered Variable Font Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS) / JS

About a code

Growing Grassy Text with Variable Fonts

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS) / JS

About a code

CSS Only Variable Font Using Decovar Regular

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Layered Fonts in CSS

Author

  • Mandy Michael

Made with

  • HTML / CSS (SCSS) / JS

About a code

Layered Fonts in CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -