Change variable fonts on hover

Custom code
#1

Variable fonts really shine in dynamics—a basic (yet impressive) example of that is on-hover animation. Altering a variable font on hover takes a couple of minutes—just put your widget’s ID into this code and paste it into the CSS tab.

[data-id="PASTE WIDGET ID HERE"] p span {
transition: 2s;
}

[data-id="PASTE WIDGET ID HERE"] p:hover span {
font-variation-settings: 'wght' 800 !important;
}

In this example, remember: a variable font is not necessarily about weight—it can be any sort of graphic transformation within one typeface. Do you have any personal favorites among variable fonts?

4 Likes