How to use Variable Fonts in Wix Studio
12 Oct 2024
Created by
Studio Tips
Learn how to use Variable Fonts in Wix Studio to add dynamic typography to your website using Custom CSS! In this tutorial, I’ll guide you through the steps to customize font weight, width, and more for unique, responsive text.
Whether you're a designer or developer, this in-depth, step-by-step tutorial covers popular usage of Variable Fonts, with all the resources available below!
Don't forget to like, comment, and subscribe to get notified about more Wix Studio tips and tutorials!
-----
Chapters:
00:00 - Intro
00:20 - Examples showcase
01:45 - Intro to Variable Fonts
04:50 - Build along: Breathing Animation (example 1) - important
15:50 - Build along: Hover menu (example 2)
23:40 - Build along: Link hover (example 3)
31:30 - Build along: Split hover (example 4)
-----
Links & Resources:
Live site: https://jtsodik.wixstudio.io/variablefonts
Assets Library: https://linktw.in/qipAFF
Code Snippet: https://codepen.io/JonathanT7/pen/xxvRmvV
Variable Fonts properties assistant: https://wakamaifondue.com/
-----
✌️ Follow me:
Instagram: https://instagram.com/wixstudiotips
#WixStudioTips #WebDesign #VariableFonts #Fonts #CSS #WixStudio
MORE FROM STUDIO TIPS
Custom
element
Clarity [Be the first to rate]
Please rate the clarity of this tutorial to help us improve. Thank you!
63