Recently, I came across a font that I wanted to use on a web application. By default, I usually rely on woff2 and woff formats to load webfonts. However, the said font was available only in TTF format. To convert the TTF files, I wanted tools that would work offline and wouldn’t require uploading the original files.
Converting TTF to WOFF
Fontello provides an NPM package called ttf2woff. It works as a CLI (command-line interface). After installing it globally through NPM,
npm install -g ttf2woff
it exposes a
ttf2woff command that can take the path of a TTF file as input and the path of a WOFF file as an output.
ttf2woff font-regular.ttf font-regular.woff
Once the above command finishes, it dumps the converted WOFF file at
Converting TTF to WOFF2
Google provides a great font compression library called woff2 which can take TTF files and compress them into a WOFF2 file. Unfortunately, that project doesn’t ship a single binary that you download and run to get the desired files. Instead, it needs to be built from the source. Fortunately, someone already built the entire source and published a ready-to-use image on the Docker Hub.
To begin with, I pulled the image on my machine.
docker pull scrlk/woff2
Once the image was available, it was simply a matter of run the following docker command to generate the WOFF2 file.
docker run -it -v C:/fonts:/srv -w /srv scrlk/woff2 sh -c "woff2_compress font-regular.ttf"
The above command
- launches a container in interactive mode (using
- mounts a volume on my machine at the location
C:/fontswhich is mapped to the
/srvfolder on the container. The
/srvfolder is set as the working directory of the container (using
- launches a shell command
font-regular.ttffile is present in
woff2_compress command compresses and dumps the WOFF2 file at the same location where the script was invoked (
/srv in the case above). Since the
/srv folder on the container is mounted at the
C:/fonts folder on the host, the WOFF2 file ends up on my machine.