Get started with variable fonts in CSS

Typography on the web allows for graphic designers to be expressive with their client’s messages. The web has come a long way with typography, from only allowing fonts that are installed on the user's computer, to now having a whole raft of weird typefaces and fun fonts available from online content delivery networks. 

If you’ve ever used Google Fonts, then you might notice that when you add a number of weights for the same typeface, because you would like to use it in bold etc, then Google generally warns you that adding these makes the page slow to load. This problem is because a whole typeface of every single character has to be downloaded for each of those weights, regardless of whether you use all the characters.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Mark Shufflebottom

Mark is a Professor of Interaction Design at Sheridan College of Advanced Learning near Toronto, Canada. Highlights from Mark's extensive industry practice include a top four (worldwide) downloaded game for the UK launch of the iPhone in December 2007. Mark created the title sequence for the BBC’s coverage of the African Cup of Nations. He has also exhibited an interactive art installation 'Tracier' at the Kube Gallery and has created numerous websites, apps, games and motion graphics work.

Latest in CSS
css secrets
11 CSS secrets you need to know in 2020
12 tips for amazing CSS animation
CSS Houdini
CSS Houdini: All you need to know about the hottest APIs
State of the art CSS
8 state-of-the-art CSS features (and how to use them)
Bulma
Get started with Bulma
The best CSS frameworks
10 best CSS frameworks in 2020
Latest in Features
Anime characters to draw;A collection of popular anime characters, including Pikachu, Totoro, Sailor Moon, and a character resembling Lupin, are depicted in a vibrant and dynamic image.
The best anime characters to draw
man with glasses and a pale shirt on a yellow sofa
"There's incredible typographic variety right now", Charles Nix reflects on type in 2025
Pete Gibbons headshot
"We’ve been making video for social since before social was a thing": a day in the life of Pete Gibbons
A group of people taking a selfie using the iPhone 16e.
7 reasons the iPhone 16e is a huge improvement on the iPhone SE 3
AI trends predictions 2025
How to use AI properly – 5 tips to help you get the most from the tech
How we made Ada; A digitally animated scene depicts two women in a grand, antique-style library, with one pointing.
How we made the "lush, handmade look" of animated series Ada