SustainableWWW Logo
Blog post image

How converting .TTF and .OTF fonts into .WOFF lowers file size

Sustainability on the internet is becoming more popular and one way you can improve your websites loading time drastically is to convert .TTF and .OTF font files into .WOFF. In this article we will talk about what .WOFF is, browser support, why .WOFF is more sustainable and at last we will give you a guide on how you can convert your font files in just a few clicks.

What is .WOFF?

WOFF stands for Web Open Font Format and it was made to make a difference between fonts used on a desktop computer and on the internet. Fonts used on a website should load faster since they are sent from either a CDN or your own web server and the bigger the file sizes are, the longer it takes and the more data it requires to load them. WOFF1 was first made in 2009 by Jonathan Kew, Tal Leming and Erik van Blokland and it was using a compression called zlib in order to compress the font files to lower latency on the internet. Today we also have a WOFF2 which makes use of an even better compression, but unfortunately there are less browser support for the WOFF2 extension. You can read more about the history of WOFF here at Wikipedia: https://en.wikipedia.org/wiki/Web_Open_Font_Format

Browser support

As mentioned in the first section, WOFF has been around since 2009 and therefore most modern browsers today have implemented support for using these file types. Below is an image from https://caniuse.com which displays the all around browser support for the .WOFF file format. As you can see, the .WOFF format is widely support between both modern browsers and less modern browsers. 

.WOFF2 have also gained support from modern browsers over the last few years. It seems that it is mainly Internet explorer 11 and Opera Mini that doesn’t support the .WOFF2 file format. Below is an image from CanIUse with the browser support for .WOFF2. 

How to convert from .TTF or .OTF to .WOFF or .WOFF2

1. Go to Font Squirrels website

First step is to open Font Squirrels website by following this link: https://www.fontsquirrel.com/tools/webfont-generator. The link will take you directly to a page where you can upload your font files and choose how you would like to convert them.

2. Upload your fonts and choose converting type

Next step is to upload the font files in either .TTF or .OTF format and then choose your desired conversion type. We usually follow the recommended “Optimal” since it ensures a good compression and a faster loading speed, but if you are en expert you can choose the “Expert” mode which lets you decide how you would like your fonts to be converted and compressed. 

3. Download and import fonts into your project

The third and last step is to download your new converted and compressed .WOFF or .WOFF2 fonts and then import them into your project.