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?

6 Likes
2

Hey Eugenia,

I tried to inject this code into my site following all the steps. However it’s just not working. My Data-Id is assigned correctly. I tried out this - https://help.readymag.com/hc/en-us/articles/4406484406299-Applying-code-to-a-specific-widget - and it worked on the first try.

I am designing a website for a typographer. And he wants hover states on his variable fonts. We have uploaded the .ttf files of the font. However maybe it needs to be a different format? Any help would be much appreciated.

3

could you post a link to your project? that would help to investigate the issue.