Getting Started with Variable Fonts on the Web

Overview

Explore the world of variable fonts in web design through this informative video tutorial. Learn about the concept of variable fonts, their advantages, and how to implement them on websites. Discover where to find variable fonts and understand the difference between static and variable font weights. Follow along to convert variable TTF files to WOFF2 format, set up font-face declarations, and identify available font axes. Gain insights into working with custom axes and utilizing custom properties for easier axis manipulation. Perfect for web developers and designers looking to enhance typography in their projects.

Syllabus

- Introduction
- What are variable fonts
- Where we can find variable fonts
- Font weights - static vs variable
- Converting a variable ttf to a woff2
- Setting up the font face declaration to use a variable font
- Finding the different axis available in a font
- Working with custom axis
- Using custom properties to make the axis easier to work with