Variable fonts are by turns really fun and really difficult to wrap one’s head around when it comes to using them on the web. Variable fonts are incredibly useful when designed and optimized to be contained in a single, compact file because they give you a broad typographical palette to work from with significantly smaller payload for your font calls.
Below are some resources that you might find helpful on your journey to using variable fonts in WordPress. By no means is my post meant to be authoritative as much as it is referencial.
I’ll keep updating as I discover new articles and techniques. Links are arranged in ascending order by publish date. Keep dates in mind since the state of variable fonts on the web and in WordPress are in asynchronous states of flux; my understanding is that Gutenberg/Full Site font capabilities usually lag behind what browsers can support by many months. Please let me know if any resource links are broken or so severely out of date that they’re irrelevant.
- (Undated) • Henry Codes | How To Convert Variable TTF Font Files to WOFF2
- (Undated) • WordPress | Gutenberg Webfonts API: Ongoing Roadmap
- (October 25, 2019) • Pixel Ambacht | Boiling eggs and fixing the variable font inheritance problem
- (March 1, 2020, updated ?) • WPCity | How to Add Custom Fonts to WordPress (Fast) in 2022
- (March 9, 2020) • The Publishing Project | Using Variable Fonts in a WordPress theme
- (July 5, 2021) • Elma Studio | How to show Adobe fonts in the WordPress block editor
- (Oct 5, 2021) • Rich Tabor | Using a Fluid Type Scale in WordPress Block Themes with Theme.json
- (May 31, 2022) • Elliot Jay Stocks | Styling type on the web with variable fonts
- (June 5, 2022) • Brian Gardner | Theme.json and Standard Font Sizing
- (July 1, 2022) • Damon Cook | Self-Hosting Google Fonts in a Block Theme
- (August 1, 2022) • Damon Cook | Font Techniques for Modern WordPress Themes
- (Aug 5, 2022) • Rich Tabor | How to add Fluid Typography to WordPress Block Themes
- (August 15, 2022) • Damon Cook | Fluid Typography for WordPress Block Themes
- (September 28, 2022) • Elliot Jay Stocks | This site’s type is now variable
- (Oct 5, 2022) • Brecht De Ruyte | Easy Fluid Typography With clamp() Using Sass Functions
- (July 20, 2023) • Cory Hughart | Using variable fonts in theme.json
