Custom code works on all paid plans (except for the archived Creator plan). With a Free plan, you can see working code in Preview mode but not in a published project.
We recommend enlisting a professional web developer to work with Code Injection—Readymag support won’t be able to assist with custom code issues.
With the help of custom code, you can change variable fonts on hover. To try it out:
- Add a new Text widget.
- Select a variable font from the Library, or upload one yourself (these options are available by clicking the font name in the Typography tab).
- Find the ID of your text widget as shown here.
- Add a Code widget and open the CSS tab in it.
- Copy and paste this code into the CSS tab. Don’t forget to replace the fragment
"PASTE WIDGET ID HERE"with your widget’s ID from step 3.
[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;
}
This code will transition font-weight to 800 when your cursor hovers over the element. Other values and variable axes can be specified in the font-variation-settings line (learn more about the CSS syntax here).
