WOFF requirements for Indian languages

1. Introduction

2. WOFF file format

2.1. File header

2.2. Metadata

2.3. Private data

3. Why WOFF required

4. Comparison between WOFF and WOFF2

5. Why use WOFF for Indian languages

6. Steps to display Indic fonts in WOFF format on browsers

6.1. Conversion of other fonts to WOFF

6.2. Using WOFF in CSS(Cascading style sheet)

6.3. Screenshots of websites using WOFF

7. Compression compared to WOFF & WOFF2 with Indic fonts

8. References

1. Introduction

WOFF (the Web Open Font Format) is a web font format. It uses a

compressed version of the same table-based sfnt structure used by

TrueType, OpenType, and Open Font Format, but adds metadata and

private-use data structures, including predefined fields allowing vendors to

provide license information if desired.

The WOFF format is not expected to replace other formats such as

TrueType/Open Type/Open Font Format or SVG fonts, but provides an

alternative solution for use cases where these formats may be less

performant, or where licensing considerations make their use less

acceptable.

2. WOFF file structure

The structure of WOFF files is similar to the structure of sfnt fonts: a table

directory containing lengths and offsets to individual font data tables,

followed by the data tables themselves. The sfnt structure is described fully

in the TrueType, Open Type and Open Font Format specifications.

The main body of the file consists of the same collection of font data tables

as the input sfnt font, stored in the same order, except that each table may

be compressed, and the sfnt table directory is replaced by the WOFF table

directory. A complete WOFF file consists of several blocks: a 44 -byte

header, immediately followed (in this order) by a variable - size table

directory, a variable number of font tables, an optional block of extended

metadata, and an optional block of private data. Except for padding with a

maximum of three null bytes in places where 4 - byte alignment of a table

length or block offset is specified, there must not be any extraneous data

between the data blocks or font data tables indicated by the WOFF header

and table directory, or beyond the last such block or table. The file must

also be rejected as invalid if the offsets and lengths of any data blocks or

font tables indicate overlapping byte ranges of the file, or ranges that would

extend beyond the end of the file.

WOFF Header

Font data

Metadata

Private data

2.1. File header

It Includes identifying signature, indicates the specific kind of font data (TTF,

TF, etc.), provides the file parsing information, font table directory, etc. it

also has a font version number, offsets to additional data chunks, and the

number of entries in the table directory that immediately follows the

header

OPTIONAL

2.2. Font data

The font data tables in the WOFF file are exactly the same as the tables in

the input font, except that each table MAY have been compressed.

2.3. Metadata

An optional block of extended metadata represented in XML format and

compressed for storage in the WOFF file. The schema for the extended

metadata XML is described below.

2.4. Private data

An optional block of private data for the font designer, foundry, or vendor

to use. The content of this data MUST NOT affect font usage or load

behaviour of user agents. User agents should make no assumptions about

the content of a private block; it may (for example) contain ASCII or

Unicode text, or some vendor-defined binary data, and it may be

compressed or encrypted, but it has no publicly defined format.

3. Why WOFF required

WOFF provides a lot of advantages over other font choices. WOFF fonts

have the following benefits:

WOFF fonts are compressed, so they are smaller than other types of

font files

WOFF fonts can help with internationalization because you can

embed fonts with characters from other languages.

Like all CSS styled text, fonts styled with WOFF are more search

engine friendly.

WOFF files include typographical information like contextual forms

and old style figures. This gives your web pages better typography

because you're using the correct characters, not just approximations.

4. Comparison between WOFF and WOFF2

WOFF format was designed to provide lightweight, easy-to-implement

compression of font data, suitable for use with CSS @font-face rules. Any

properly licensed TrueType/OpenType/Open Font Format file can be

packaged in WOFF format for Web use. User agents decode the WOFF file

to restore the font data such that it will display identically to the input font.

The WOFF format also allows additional metadata to be attached to the file;

this can be used by font designers or vendors to include licensing or other

information, beyond that present in the original font. Such metadata does

not affect the rendering of the font in any way, but may be displayed to the

user on request.

WOFF 2 format was designed to provide a reasonably easy-to-implement

compression of font data with significantly better compression than

previous techniques, suitable for use with CSS @font-face rules. The

improvement in compression rates, compared to previously developed

WOFF 1.0 format [WOFF1] are realized due to improved entropy coding and

font data preprocessing and optimization step that reduces built-in

redundancy of various font data structures. The evolution of compression

gain from WOFF is given in below section.

5. Requirements for Indian languages in WOFF

The Indic fonts need to contain a glyph for each allocated code point of the

script. For example, Hindi would contain glyphs for the allocated code

points. All the Indic Glyph set should be incorporated in the Font Tables. So

there is need to define Glyph set of all Indic characters in the WOFF file

structure including the following :

(a) glyphs for conjuncts

(b) variants for vowel signs (matras), vowel modifiers (Chandrabindu,

Anuswar), the consonant modifier (Nukta)

WOFF is used to compress the other Indic fonts and give the following

advantages :

The font data is compressed, so multilingual sites using WOFF will use

less bandwidth and will load faster than equivalent uncompressed

TrueType or OpenType files.

Many font vendors that are unwilling to license their TrueType or

OpenType format fonts for use on the web will license WOFF format

fonts. This improves availability of fonts to site designers.

Both proprietary and free-software browser vendors like the

WOFF format, so it has the potential of becoming a truly universal,

interoperable font format for the web, unlike other current font

formats.

6. Implementation to display Indic fonts in WOFF format on

browsers

6.1. Conversion of other fonts to WOFF

The first step is to convert OTF/TTF/Open font format to WOFF. The various

tools are available on the web for conversion. Some of the tools references

are given below :

http://everythingfonts.com/ttf-to-woff

http://onlinefontconverter.com/

http://www.font2web.com/

http://www.softpedia.com/get/Others/Font-Utils/Free-TTF-to-

WOFF-Converter.shtml

Compression results given by using above tool of some of the Indic

fonts(Normal) are given below:

Font (ttf) ttf (Kb) WOFF

(Kb)

WOFF2

(Kb)

Compression

in WOFF(%)

Compression

in WOFF2(%)

SakalBharati

Hindi

377 135 78 64.19 % 79.31%

SakalBharati

Bengali

366 163 110 55.46% 69.94%

SakalBharati

Kannada

233 105 66 54.93% 71.67%

SakalBharati

Assamese

365 163 109 55.34% 70.13%

SakalBharati

Nepali

377 136 78 63.92% 79.31%

SakalBharati

Oriya

344 141 89 59.01% 74.12%

SakalBharati

Gujarati

306 111 63 63.72% 79.41%

SakalBharati- 234 71 40 69.65% 82.90%

Punjabi

SakalBharati-

TamilNormal

295 118 73 60% 75.25%

SakalBharati

Maithili

378 135 78 64.8% 79.36%

Aparaj-

Devanagari

218 115 98 47.2% 55%

Gautmi-Telugu 251 120 105 52.1% 58.1%

Kalinga-Oriya 208 125 111 39.9% 46.6%

Kartika-

Malyalam

129 72 67 44.1% 48.6%

Kokila-

Devanagari

197 106 94 46.1% 52.2%

Latha-Tamil 119 67 62 43.6% 47.8%

Mangal-

Devanagari

202 97 86 51.9 57.4

Raavi-Gurmukhi 93 46 42 50.5% 54.8%

Shruti-Gujarati 264 117 102 55.6% 61.3%

Vani-Telugu 378 136 108 64% 71.4%

Vijaya-Tamil 168 84 76 50% 54.7%

Vrinda-Bengali 254 130 112 48.8% 55.9%

6.2. Using WOFF in CSS(Cascading style sheet)

The primary purpose of the WOFF format is to package fonts linked to Web

documents by means of CSS @font-face rules. User agents supporting the

WOFF file format for linked fonts must respect the requirements of the

CSS3 Fonts specification .In particular, such linked fonts are only available to

the documents that reference them; they MUST NOT be made available to

other applications or documents on the user's system. The WOFF format is

intended for use with @font -face to provide fonts linked to specific Web

documents.

The @font-face CSS property to use WOFF fonts for text in web content. It

works exactly like OpenType and TrueType format fonts do, except will

likely let your content download more efficiently due to the addition of

compression.

@font-face {

font-family: 'MyWebFont';

src: url('myfont2.woff2') format('woff2');

url('myfont.woff') format('woff');

Style-linked fonts are being used in all HTML elements that usually display

variants of their default fonts, e.  g. em (emphasis: italic by default) and

strong (strong emphasis: bold by default).

Use the font-weight and font-style properties inside your @font-face rules

to define groups of style-linked fonts under a common family name:

@font-face {

font-family: Unit;

src: url("/fonts/UnitWebPro-Regular.woff") format("woff");

}

@font-face {

font-family: Unit;

src: url("/fonts/UnitWebPro-Bold.woff") format("woff");

font-weight: bold;

}

@font-face {

font-family: Unit;

src: url("/fonts/UnitWebPro-Italic.woff") format("woff");

font-style: italic;

}

@font-face {

font-family: Unit;

src:url("/fonts/UnitWebPro-BoldItalic.woff")

format("woff");

font-weight: bold;

font-style: italic;

}

p {

font-family: Unit, Arial, sans-serif;

line-height: 1.35em;

}

6.3. Screenshots of Desktop and mobile browsers using

WOFF

Text display on browsers after converting ttf font to woff of some of the

Indic languages are shown below:

i. Hindi Font : SakalBharati Hindi Normal.woff

ii. Bengali Fiont : SakalBharati Bengali.woff

iii. Gujarati font : SakalBharatiGujarati.woff

iv. Tamil font : SakalBharati-TamilNormal.woff

v. Punjabi font : SakalBharatiPunjabiNormal.woff

vi. Kannada font : SakalBharatiKannada.woff

Mobile browsers :

The test results of some of the Indic languages in simulator are

shown below :

iphone4 simulator

Hindi

Bengali

Gujarati Kannada

Nepali

Punjabi

Tamil

Android version 4.4.2

Hindi

Bengali

Gujarati

Nepali

Kannada

Punjabi

Tamil

7. References

1. http://www.w3.org/TR/WOFF/

2. http://www.w3.org/TR/WOFF2/

3. http://everythingfonts.com/ttf-to-woff

4. https://developer.mozilla.org/en-US/docs/Web/Guide/WOFF

5. http://iphone4simulator.com/