# Change variable fonts on hover **URL:** \ **Category:** Custom code\ **Created:** [February 25, 2022, 12:17pm UTC](https://forum.readymag.com/t/change-variable-fonts-on-hover/51 "2022-02-25T12:17:44Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![Eugenia.Readymag](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/eugenia.readymag/32/29_2.png) [@Eugenia.Readymag](https://forum.readymag.com/u/Eugenia.Readymag)\ **Post date:** [February 25, 2022, 12:17pm UTC](https://forum.readymag.com/t/change-variable-fonts-on-hover/51/1 "2022-02-25T12:17:44Z")
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. ```auto [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? ---
**Author:** ![kutzkutz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@kutzkutz](https://forum.readymag.com/u/kutzkutz)\ **Post date:** [January 29, 2025, 6:14pm UTC](https://forum.readymag.com/t/change-variable-fonts-on-hover/51/2 "2025-01-29T18:14:54Z")
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](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. ---
**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\ **Post date:** [January 30, 2025, 8:37am UTC](https://forum.readymag.com/t/change-variable-fonts-on-hover/51/3 "2025-01-30T08:37:25Z")
could you post a link to your project? that would help to investigate the issue. ---
**Author:** ![stu84151](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@stu84151](https://forum.readymag.com/u/stu84151)\ **Post date:** [February 19, 2025, 9:58am UTC](https://forum.readymag.com/t/change-variable-fonts-on-hover/51/4 "2025-02-19T09:58:27Z")
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 ![Screenshot 2025-02-19 at 2.01.26 AM](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/5/5bfa2e56db104ea097dc48c3b21b314a2d9d9907.jpeg) I would be so thankful if anyone could give me a tip, thank you! ---
**Author:** ![kutzkutz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@kutzkutz](https://forum.readymag.com/u/kutzkutz)\ **Post date:** [February 19, 2025, 2:38pm UTC](https://forum.readymag.com/t/change-variable-fonts-on-hover/51/5 "2025-02-19T14:38:24Z")
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. ---
**Author:** ![stu84151](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@stu84151](https://forum.readymag.com/u/stu84151)\ **Post date:** [February 20, 2025, 3:35am UTC](https://forum.readymag.com/t/change-variable-fonts-on-hover/51/6 "2025-02-20T03:35:22Z")
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!! 😭 🙏 ---
**Author:** ![kutzkutz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@kutzkutz](https://forum.readymag.com/u/kutzkutz)\ **Post date:** [February 20, 2025, 6:50am UTC](https://forum.readymag.com/t/change-variable-fonts-on-hover/51/7 "2025-02-20T06:50:52Z")
Glad I could save you some hours! I was ready to throw my macbook out the window. ---
**Author:** ![kutzkutz](https://avatars.discourse-cdn.com/v4/letter/k/aca169/32.png) [@kutzkutz](https://forum.readymag.com/u/kutzkutz)\ **Post date:** [February 20, 2025, 6:51am UTC](https://forum.readymag.com/t/change-variable-fonts-on-hover/51/8 "2025-02-20T06:51:30Z")
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.