Converting .TTF & .OTF fonts to .WOFF

In the tutorial "Styling Text with CSS and Local Fonts" the fonts I use are in a file format .WOFF. This tutorial describes the conversion process using an online converter, developed by Andrew Sun, to generate fonts suitable for use in the tutorial

Using specific or custom fonts are among the most potentially appealing aspects of CSS3 for designers creating skins within Pano2VR. With the @font-face rule, you can render any font you have online within your text, regardless of whether the user has it installed or not. There are a number of fonts supported by the different browsers but for my projects I tend to stick with WOFF.
 

Browser Support

The @font-face rule is supported in Internet Explorer, Firefox, Opera, Chrome, and Safari.
The numbers in the table specifies the first browser version that fully supports the font format.

Browser support chart

Browser support chart

*Edge and IE: The font format only works when set to be "installable".
*Firefox: Disabled by default, but can be enabled (need to set a flag to "true" to use WOFF2).

Online Font Converters

There are a number of online converters you can use. In this exmple I'm using WOFFer by Andrew Sun at https://andrewsun.com/tools/woffer-woff-font-converter/

About
The WOFFer is a tool to convert TTF or OTF to WOFF and back to TTF or OTF. WOFF, short for Web Open Font Format, is a special font format that is compressed and optimized for use on the web. This format compresses the font data using zlib, which can greatly reduce the size of the font for faster loading.

Getting Started
1. Open the web URL and you will see the conversion tool (shown above) and the 'WOFFer Drag and drop files here' window

2. In this example I'm going to use the font Calibri and the three styles, Bold, Light and SemiBold

 
WOFFer web page and Drag and drop window

WOFFer web page and Drag and drop window

 
 
Font files selected for conversion

Font files selected for conversion

 

3. Drag the files onto the Drag and Drop window, WOOFer will start processing the files and update the page when the conversion is complete

 
Drag and drop your font files onto the window

Drag and drop your font files onto the window

 

4. WOOFer will start processing the files and update the page when the conversion is complete

processing_images
ready_download

Files being processed and ready for download

5. Once the files have been processed you can download them individually or as a zip file.

6. The files can now be used in conjunction with your Pano2VR project, for more information on using them within a project visit the tutorial "Styling Text with CSS and Local Fonts"

Tony Redhead

93 Maud Street, Unley, SA, 5061, Australia