Tutorial #1: Using Variable Fonts on the Web
DINAMO is a Swiss type design agency offering retail and bespoke typefaces, design software, research, and consultancy. Founded in Basel, we operate via a network of satellite members across the globe.
@keyframes ginto-animation {
from {
font-variation-settings: "wght" 0, "ital" 0, "NORD" 100;
}
to {
font-variation-settings: "wght" 200, "ital" 100, "NORD" 200;
}
}
.my-variable-text {
font-family: "Ginto Variable";
transition: font-variation-settings 0.3s ease;
animation-name: ginto-animation;
animation-duration: 1.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}