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
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.
could you post a link to your project? that would help to investigate the issue.
Hello everyone, I followed the steps but it’s not working when I preview.
I wonder if I did something wrong. Question: should the original static text be set as text, or button? Is it okay that it already has animation setup, or should I make it as plain and basic as possible?
Here’s how I found my data-ID: 67b5a5736ec20a2d785fd233
I would be so thankful if anyone could give me a tip, thank you!
Your code works only when there is no style attached to the font. So if you set up a H1 style, it’s not going to work. There should absolutely be some documentation on this so people aren’t wasting half a day over nothing.
1 Like
Oh my gosh, I SCREAMED when I saw it worked!!! This is amazing, thank you so much for your suggestion, Kutzkutz! You are giving me a good night sleep today!! 
1 Like
Glad I could save you some hours! I was ready to throw my macbook out the window.
What isn’t working for me still is that the width of the font is changing on hover, and the code i injected isn’t working. So, not soooo sure it’s going to help.
