Home / Typography / Variable Fonts
Variable Fonts CSS Template, Free with Live Demo
Free variable font template with live sliders for weight, width and slant, plus words that change weight on hover. Built as a type specimen. Live demo. The example is Flexa, a type foundry specimen page.
What is variable fonts?
A variable font is one font file that holds every weight and width in between. Instead of loading Light, Regular and Bold separately, you pick any value you like, such as weight 640, and even animate between them.
This template uses Roboto Flex from Google Fonts. The sliders write their values into CSS variables, and font-variation-settings reads them. Hover a word in the sentence to watch it grow from thin to heavy.
Good for
- Type foundries and font shops
- Design studio sites
- Interactive headlines
- Brand pages that need one flexible font
What you get in this template
- Weight, width and slant sliders that update live
- Editable specimen text, click and type
- Words that change weight and width on hover
- Four axis examples at the bottom
- One font file for every style on the page
The key CSS
This is the part that makes the variable fonts look work. Copy it into your own project.
:root { --w: 600; --wd: 100; --sl: 0; }
.big {
font-family: "Roboto Flex", sans-serif;
font-variation-settings: "wght" var(--w), "wdth" var(--wd), "slnt" var(--sl);
transition: font-variation-settings .15s;
}
.hov span { font-variation-settings: "wght" 200, "wdth" 60; transition: font-variation-settings .35s; }
.hov span:hover { font-variation-settings: "wght" 1000, "wdth" 151; }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is a variable font?
It is a single font file that contains a full range of styles along one or more axes, such as weight, width or slant, so you can use any value in between.
How do I use a variable font in CSS?
Load it like any web font, then set font-variation-settings: "wght" 640, "wdth" 90. For weight you can also just use font-weight with any number.
Are variable fonts good for page speed?
Usually yes. One variable file often replaces four or more static files, which means fewer downloads.
More Typography designs
051. Kinetic Type
Shift, a dance studio
053. Oversized Serif
Maison Clair, a boutique hotel
054. Outline Text
Museum of Sound, an exhibition site
055. Mixed Font Pairing
Paper Lantern, an independent bookshop
056. Image in Text
Alpenglow, a ski resort
057. Gradient Text
Sunset Sound, a festival lineup
058. Handwritten Accents
Nonna's Kitchen, a cooking school
059. Monospace
Byte Sized Weekly, a developer newsletter