-
-
-
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 is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
Michael Andersen
Michael Andersen is the author of Sustainable Web Design In 20 Lessons and the founder of Sustainable WWW (World-wide-web), an organization teaching sustainable practices. With a passion for web design and the environment, Michael solves puzzles to make the internet more sustainable.
