What is WOFF (Web Open Font Format)?

The information in this article applies to WOFF and WOFF2 files.

What is WOFF file?

Similar to ZIP files, WOFF files act as containers for other files, namely TrueType Font (TTF) and OpenType Font (OTF) files. These file types give web designers the ability to use fonts in addition to the standard characters found on most computers.

WOFF has been replaced with WOFF2 format. WOFF2 provides even better compression algorithms, reducing the original file size by 30%. As a result, WOFF2 files take up less bandwidth and load faster. WOFF files have the .woff extension, while WOFF2 files have the .woff2 extension.

What is WOFF (Web Open Font Format)? Picture 1 Web Open Font Format (WOFF) is a file format for web fonts developed by Mozilla

How WOFF File Works?

Almost all web pages use Cascading Style Sheets (CSS) to define the layout of HTML and other elements on the screen. For example, developers can use CCS to change web fonts by referencing the fonts that are installed on the user's computer. However, if your PC or browser doesn't support the font, the font will appear as a different font or won't load at all depending on how the page's font stack is set up.

To avoid this problem, custom fonts can be stored in the WOFF file, which is saved on the server along with all other web page elements. The designer can then use the CSS @ font-face property to reference the WOFF file and display the font in the browser.

Google Chrome, Firefox, Microsoft Edge, Opera and Safari all support the WOFF format, but you may need to update your web browser to the latest version.

Benefits of WOFF

In addition to the wide variety of fonts available to web developers, using WOFF files has a number of advantages. For example:

- Compression: Because WOFF files are compressed, they load faster than other font files.

- Support for HTML and CSS : Unlike the image file, WOFF files can be styled with HTML and CSS.

- SEO: Fonts WOFF better for search engine optimization (SEO) than the image contains text.

- Optimal rendering : WOFF files include typed information (old style metrics and context forms) for optimal rendering on all devices.

- The ability to access the site : The help file WOFF sites more accessible, because the text can be read aloud, but the image contains text is not.

1. Embedding: WOFF fonts help internationalize by allowing you to embed fonts with characters from other languages.

Create your own WOFF font

What is WOFF (Web Open Font Format)? Picture 2

Font editors like FontForge allow you to design your own font sets and export them as WOFF files. You can also convert WOFF files to TTF or OTF using FontForge. If you have another favorite font editor that only supports TTF or OTF, you can use the sfnt2woff tool to convert the font to a WOFF file.

The Open Font Library (https://fontlibrary.org/) and Font Squirrel (https://www.fontsquirrel.com/) have hundreds of fonts in WOFF format that are free for commercial and non-commercial use.

Isabella Humphrey

Update 30 September 2020