How to Convert a Variable Font to WOFF2

By Marko Krstić · Published 25 Feb 2022 · Last reviewed 2 Oct 2026

To use a variable font on a website, convert it from TTF to WOFF2: the same font, compressed for the web, with every axis intact. You can do it in the browser in a few seconds, or on the command line with Google’s woff2 tool.

Why convert at all?

Font foundries and Google Fonts ship variable fonts as .ttf files. Browsers can load them, but TTF isn’t compressed. WOFF2 is the compressed web format, and every current browser supports it.

In our test, the variable font Alumni Sans went from 135,884 bytes as TTF to 57,068 bytes as WOFF2, which is 42% of the original size (measured on 2 October 2026 with the tool from Option 2). Other fonts will differ.

Option 1: in the browser

Our free variable font converter converts a variable TTF to WOFF2 in your browser and keeps every axis. Nothing to install.

Option 2: on the command line

This is the method from the video. It uses Google’s woff2 tool and needs git, make and a C++ compiler (on macOS, the Xcode command line tools).

Create a folder and open it in your terminal. Typing cd and dragging the folder into the terminal window saves typing the path.
Download and build the tool:

git clone --recursive https://github.com/google/woff2.git
cd woff2
make clean all

Convert the font:

./woff2_compress path_to_font/myfont.ttf

The .woff2 file appears next to the original.

Use the font in WordPress

Upload the WOFF2 file and register it with @font-face, or let a font manager do it. The steps are in how to use variable fonts in WordPress. Font Hero registers variable fonts for any theme or builder; see Convert Variable Font in its docs.

Sources

woff2, Google, GitHub (read 2 October 2026)

Tested on Linux on 2 October 2026: the build and woff2_compress commands, with Alumni Sans from Google Fonts.

Variable fonts in WordPress, managed

Font Hero registers custom and variable fonts for any theme or builder, with preload and font-display settings.

See Font Hero

Related guides

How to Host Google Fonts Locally in WordPress (GDPR): Self-host fonts in WordPress, GDPR-friendly and faster.
How to Reduce Font Load in WordPress: WOFF2, subsets, variable fonts, preload and font-display.
How to Use Adobe Fonts (Typekit) in WordPress: Premium Typekit fonts on your WordPress site.
Font Pairing and Font Stacks for WordPress Sites: Fonts that work together, with fallbacks that look right.

Browse all WordPress tutorials.