Blog post image

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

Sustainability on the internet is becoming more popular and one way you can improve your website's 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 the internet. Fonts used on a website should load faster since they are sent from either a CDN or your 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 to compress the font files to lower latency on the internet. Today we also have a WOFF2 which makes use of even better compression, but unfortunately, there is 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

What is WOFF2

Web Open Font Format 2, or WOFF2, is a new font compression standard that has been designed to replace the now outdated Web Open Font Format, or WOFF. It has been designed to be more efficient and provide better quality fonts by reducing the size of files without any loss in glyph quality.

The difference between WOFF and WOFF2

There are two different formats for compressing fonts, WOFF and WOFF2. The difference between the two is that WOFF2 is an improved version of the original format which was released back in 2010.

The two formats of web fonts, WOFF and WOFF2, are very similar in many ways. The main difference between the two formats is the compression method. WOFF2 uses a newer method called DEFLATE which offers better compression ratios, but also requires more time for decompression than WOFF

Browser support

In all web browsers, we have common fonts that can be used as either fallback or as a general font, but when we want to use custom fonts we need to check if it is available and whether the font types are supported. WOFF and WOFF2 have been around for a while and have gained general support in most browsers, and underneath you can see the latest support data so that you know which fonts to use where. 

WOFF

As briefly 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. Underneath here you will find the latest browser support data from some of the most modern browsers.

  • IE: version 9+
  • Edge: version 12+ 
  • Firefox: version 3.6+
  • Chrome: version 5+
  • Safari: version 5.1+
  • Opera: version 11.5+
  • Safari iOS: version 5+
  • Opera mini: No support 
  • Android browser: version 4.4+
  • Opera mini: version 12+
  • Chrome (Android): version 102+
  • Firefox (Android): version 101+
  • UC Browser (Android): version 12.12+
  • Samsung internet: version 4+
  • QQ Browser: version 10.4+
  • Baidu browser: version 7.12+ 
  • KaiOS Browser: version 2.5+

WOFF2

WOFF2 has 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. Underneath here you will find the latest browser support data from some of the most modern browsers.

  • IE: No support
  • Edge: version 14+
  • Firefox: version 39+
  • Chrome: version 36+
  • Safari: version 12+
  • Opera: version 23+
  • Safari iOS: version 10+
  • Opera mini: No support 
  • Android browser: version 101+
  • Opera mini: version 64+
  • Chrome (Android): version 102+
  • Firefox (Android): version 101+
  • UC Browser (Android): version 12.12+
  • Samsung internet: version 4+
  • QQ Browser: version 10.4+
  • Baidu browser: version 7.12+ 
  • KaiOS Browser: version 2.5+

How to convert from TTF or OTF to WOFF or WOFF2

Converting TTF (True type font) or OTF (Open type font) to a WOFF or WOFF2 format is both easy and quick. While converting the fonts we can choose options that further optimize them for the web use or just go with the standard settings which already is a big improvement. In general, you will see a reduction in file size from around 400-500KB to 30-80KB.

1: Go to Font Squirrels' website

The 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 to convert

The 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 an 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.

How to add the WOFF and WOFF2 fonts to your project

Adding WOFF and WOFF2 fonts to your project might be a little different than what you are used to. Instead of adding a traditional link in your HTML head you add the font files to your project and import them through your CSS file. This procedure might seem a bit complicated but once you get started you see it’s easy. Underneath here we have provided a small guide on how to add your font squirrel WOFF or WOFF2 files to your project. 

1: Add the files to your project

First, you start by adding the font files to your project. The most common is to add it to a folder called public. Normally you will find images, icons, stylesheets, and more in the public folder, so placing it here will be most logical. We recommend adding both WOFF and WOFF2 versions of your fonts since it created better support in different web browsers.

2: Import the fonts in your CSS

Once you have added the font files to your project you are ready to import them into your project using CSS font-face. Underneath here you will find a code snippet you can copy into your own CSS sheet, but remember to change the path and the file names so that they match your structure and naming.

@font-face {
   font-family: 'MyWebFont';
   src: url('myfont.woff2') format ('woff2'),
   url('myfont.woff') format('woff');
}

Author

Michael Andersen

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.