static-to-variable / showcase / spectral
Spectral variable font
Google Fonts ships Spectral as 14 static styles with no variable version. This one was rebuilt from ExtraLight 200 · Light 300 · Regular 400 · Medium 500 · SemiBold 600 · Bold 700 · ExtraBold 800, every weight redrawn onto a shared outline structure so it interpolates. Drag the slider to move through the weight axis.
Use the downloaded variable font
Choose WOFF2 for a website or TTF for desktop design tools. Put the webfont in your project, declare its full weight range, then use any weight between 200 and 800.
@font-face {
font-family: "Spectral";
src: url("/spectral-variable.woff2") format("woff2");
font-style: normal;
font-weight: 200 800;
}
.heading { font-family: "Spectral", sans-serif; font-weight: 650; }Built from
ExtraLight 200 · Light 300 · Regular 400 · Medium 500 · SemiBold 600 · Bold 700 · ExtraBold 800. The weights above and below are interpolated, and any glyph that could not be matched cleanly is frozen at a single weight rather than allowed to drift.
Attribution
Spectral by Production Type, OFL.
Unofficial community build. Not affiliated with the foundry or Google Fonts.
Do this to your own fonts
Drop a family of static weights into the build tool and get one variable font back.