Convert TTF to WOFF/ WOFF2 Fonts in Minutes: A Step-by-Step Guide

Converting a TrueType Font (TTF) to Web Open Font Format (WOFF | WOFF2) for web use is simpler than you might think. Here, I will show you three easy methods to convert your chosen font.

1. Using ttf2woff and ttf2woff2 npm packages

ttf2woff

To download and install the ttf2woff package globally, use the command provided below.

npm install -g ttf2woff

After installation, you can use the ttf2woff binary to convert any font. For example, the command below will convert the Roboto-Regular TTF font to WOFF format.

ttf2woff Roboto-Regular.ttf Roboto-Regular.woff

ttf2woff2

To download and install the ttf2woff2 package globally, use the below command.

npm install -g ttf2woff2

After completing the installation, use the command below to convert your fonts.

cat your-font.ttf | ttf2woff2 > your-font.woff2

2. Using pyftsubset – fonttools

To use this tool, make sure you have Python installed. Then, execute the commands below to install fonttools.

pip install fonttools

// For woff2 conversion
pip install brotli

You need to install Brotli in order to convert files to the WOFF2 format.

After installing the necessary packages, use the command below to convert to WOFF format.

pyftsubset your-font.ttf --output-file="your-font.woff" --flavor=woff --unicodes="*"

To convert to WOFF2, use the command below:

pyftsubset your-font.ttf --output-file="your-font.woff2" --flavor=woff2 --unicodes="*"

3. Using FontForge

You can simply use FontForge to generate WOFF and WOFF2 fonts for your desired font. Please download and install FontForge (https://fontforge.org/en-US/).

After installation, open the font in FontForge, click on File in the top menu, and select ‘Generate Fonts.’

A dialog will pop up. Select the font type and click ‘Generate’. If you receive any warnings, simply click ‘Ok’ to continue.

After generation, check the folder where you stored the original TTF to see the WOFF it generated.

Using the techniques outlined above, you should now be equipped to successfully convert any TrueType Font (TTF) file into the Web Open Font Format (WOFF or WOFF2). These methods will allow you to enhance your web projects with optimized font formats suitable for web usage.