WOFF (Web Open Font Format) File Format

Overview

Web Open Font Format (WOFF) is a font format designed specifically for web use. It packages TrueType or OpenType fonts with compression and metadata, providing smaller file sizes and better web performance while maintaining font quality.

Technical Specifications

• Format Type: Compressed font container
• File Extension: .woff
• MIME Type: font/woff
• Compression: zlib compression
• Base Formats: TrueType (TTF) or OpenType (OTF)
• Metadata: Optional XML metadata
• Private Data: Optional vendor-specific data

Format Structure

WOFF files contain:

• WOFF header with signature and metadata
• Compressed font table directory
• Compressed font tables (glyph data, metrics, etc.)
• Optional extended metadata in XML format
• Optional private data block

History and Development

• 2009: WOFF 1.0 specification developed by Mozilla, Opera, and Microsoft
• 2012: WOFF became a W3C Recommendation
• 2014: WOFF 2.0 development began with Brotli compression
• 2018: WOFF 2.0 became W3C Recommendation
• Present: Widely supported across all modern browsers

Use Cases

• Web typography and font delivery
• Reducing font file sizes for faster loading
• Cross-browser font compatibility
• Progressive font loading strategies
• CDN font distribution
• Custom web font hosting

Code Examples

CSS Font Loading

/* Basic WOFF font declaration */
@font-face {
    font-family: 'CustomFont';
    src: url('fonts/customfont.woff') format('woff'),
         url('fonts/customfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Using the font */
.custom-text {
    font-family: 'CustomFont', Arial, sans-serif;
}

/* Multiple weights and styles */
@font-face {
    font-family: 'WebFont';
    src: url('webfont-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'WebFont';
    src: url('webfont-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'WebFont';
    src: url('webfont-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

/* Font loading optimization */
@font-face {
    font-family: 'OptimizedFont';
    src: url('optimized.woff2') format('woff2'),
         url('optimized.woff') format('woff');
    font-display: swap;
    unicode-range: U+0020-007F; /* Latin Basic */
}

JavaScript Font Loading API

// Modern Font Loading API
async function loadFont() {
    try {
        const font = new FontFace('CustomFont', 'url(custom.woff)');
        await font.load();
        document.fonts.add(font);
        console.log('Font loaded successfully');
    } catch (error) {
        console.error('Font loading failed:', error);
    }
}

// Check font loading status
document.fonts.ready.then(() => {
    console.log('All fonts loaded');
});

// Progressive font loading
class FontLoader {
    constructor() {
        this.loadedFonts = new Set();
    }
    
    async loadFont(name, url, options = {}) {
        if (this.loadedFonts.has(name)) {
            return Promise.resolve();
        }
        
        const font = new FontFace(name, `url(${url})`, options);
        
        try {
            await font.load();
            document.fonts.add(font);
            this.loadedFonts.add(name);
            
            // Apply loaded class for CSS styling
            document.documentElement.classList.add(`font-${name}-loaded`);
            
            return font;
        } catch (error) {
            console.error(`Failed to load font ${name}:`, error);
            throw error;
        }
    }
    
    preloadCriticalFonts() {
        const criticalFonts = [
            { name: 'MainFont', url: 'fonts/main.woff', weight: '400' },
            { name: 'MainFont', url: 'fonts/main-bold.woff', weight: '700' }
        ];
        
        return Promise.all(
            criticalFonts.map(font => 
                this.loadFont(font.name, font.url, { weight: font.weight })
            )
        );
    }
}

// Usage
const fontLoader = new FontLoader();
fontLoader.preloadCriticalFonts().then(() => {
    console.log('Critical fonts loaded');
});

Node.js WOFF Processing

const fs = require('fs');
const zlib = require('zlib');

class WoffProcessor {
    constructor(buffer) {
        this.buffer = buffer;
        this.view = new DataView(buffer);
        this.offset = 0;
    }
    
    readUint32() {
        const value = this.view.getUint32(this.offset, false); // big endian
        this.offset += 4;
        return value;
    }
    
    readUint16() {
        const value = this.view.getUint16(this.offset, false);
        this.offset += 2;
        return value;
    }
    
    parseHeader() {
        const signature = this.readUint32();
        const flavor = this.readUint32();
        const length = this.readUint32();
        const numTables = this.readUint16();
        const reserved = this.readUint16();
        const totalSfntSize = this.readUint32();
        const majorVersion = this.readUint16();
        const minorVersion = this.readUint16();
        const metaOffset = this.readUint32();
        const metaLength = this.readUint32();
        const metaOrigLength = this.readUint32();
        const privOffset = this.readUint32();
        const privLength = this.readUint32();
        
        return {
            signature: signature.toString(16),
            flavor: this.flavorToString(flavor),
            length,
            numTables,
            totalSfntSize,
            version: `${majorVersion}.${minorVersion}`,
            metadata: { offset: metaOffset, length: metaLength, origLength: metaOrigLength },
            privateData: { offset: privOffset, length: privLength }
        };
    }
    
    flavorToString(flavor) {
        const bytes = [
            (flavor >> 24) & 0xFF,
            (flavor >> 16) & 0xFF,
            (flavor >> 8) & 0xFF,
            flavor & 0xFF
        ];
        return String.fromCharCode(...bytes);
    }
    
    extractMetadata() {
        const header = this.parseHeader();
        if (header.metadata.length === 0) return null;
        
        const metadataBuffer = this.buffer.slice(
            header.metadata.offset,
            header.metadata.offset + header.metadata.length
        );
        
        // Decompress metadata (zlib)
        const decompressed = zlib.inflateSync(metadataBuffer);
        return decompressed.toString('utf-8');
    }
    
    convertToTtf() {
        // Extract and decompress font tables to create TTF
        const header = this.parseHeader();
        const tables = this.parseTables();
        
        // Reconstruct TTF from decompressed tables
        // This is a simplified version
        const ttfBuffer = this.reconstructTtf(header, tables);
        return ttfBuffer;
    }
    
    parseTables() {
        const header = this.parseHeader();
        const tables = [];
        
        for (let i = 0; i < header.numTables; i++) {
            const tag = this.readUint32();
            const offset = this.readUint32();
            const compLength = this.readUint32();
            const origLength = this.readUint32();
            const origChecksum = this.readUint32();
            
            tables.push({
                tag: this.tagToString(tag),
                offset,
                compLength,
                origLength,
                checksum: origChecksum
            });
        }
        
        return tables;
    }
    
    tagToString(tag) {
        const bytes = [
            (tag >> 24) & 0xFF,
            (tag >> 16) & 0xFF,
            (tag >> 8) & 0xFF,
            tag & 0xFF
        ];
        return String.fromCharCode(...bytes);
    }
}

// Usage example
function analyzeWoffFile(filePath) {
    const buffer = fs.readFileSync(filePath);
    const processor = new WoffProcessor(buffer.buffer);
    
    const header = processor.parseHeader();
    console.log('WOFF Header:', header);
    
    const metadata = processor.extractMetadata();
    if (metadata) {
        console.log('Metadata:', metadata);
    }
    
    const tables = processor.parseTables();
    console.log('Font Tables:', tables);
}

// Convert WOFF to TTF
function woffToTtf(woffPath, ttfPath) {
    const buffer = fs.readFileSync(woffPath);
    const processor = new WoffProcessor(buffer.buffer);
    
    const ttfBuffer = processor.convertToTtf();
    fs.writeFileSync(ttfPath, Buffer.from(ttfBuffer));
    console.log(`Converted ${woffPath} to ${ttfPath}`);
}

Python WOFF Analysis

import struct
import zlib
import xml.etree.ElementTree as ET

class WoffAnalyzer:
    def __init__(self, filepath):
        with open(filepath, 'rb') as f:
            self.data = f.read()
        self.offset = 0
    
    def read_uint32(self):
        value = struct.unpack('>I', self.data[self.offset:self.offset+4])[0]
        self.offset += 4
        return value
    
    def read_uint16(self):
        value = struct.unpack('>H', self.data[self.offset:self.offset+2])[0]
        self.offset += 2
        return value
    
    def parse_header(self):
        self.offset = 0
        
        signature = self.read_uint32()
        flavor = self.read_uint32()
        length = self.read_uint32()
        num_tables = self.read_uint16()
        reserved = self.read_uint16()
        total_sfnt_size = self.read_uint32()
        major_version = self.read_uint16()
        minor_version = self.read_uint16()
        meta_offset = self.read_uint32()
        meta_length = self.read_uint32()
        meta_orig_length = self.read_uint32()
        priv_offset = self.read_uint32()
        priv_length = self.read_uint32()
        
        return {
            'signature': f'0x{signature:08X}',
            'flavor': self.uint32_to_tag(flavor),
            'length': length,
            'num_tables': num_tables,
            'total_sfnt_size': total_sfnt_size,
            'version': f'{major_version}.{minor_version}',
            'metadata': {
                'offset': meta_offset,
                'length': meta_length,
                'orig_length': meta_orig_length
            },
            'private_data': {
                'offset': priv_offset,
                'length': priv_length
            }
        }
    
    def uint32_to_tag(self, value):
        return ''.join(chr((value >> (8 * (3 - i))) & 0xFF) for i in range(4))
    
    def extract_metadata(self):
        header = self.parse_header()
        
        if header['metadata']['length'] == 0:
            return None
        
        start = header['metadata']['offset']
        end = start + header['metadata']['length']
        compressed_data = self.data[start:end]
        
        try:
            decompressed = zlib.decompress(compressed_data)
            return decompressed.decode('utf-8')
        except Exception as e:
            print(f"Failed to decompress metadata: {e}")
            return None
    
    def parse_metadata_xml(self):
        metadata = self.extract_metadata()
        if not metadata:
            return None
        
        try:
            root = ET.fromstring(metadata)
            return self.xml_to_dict(root)
        except ET.ParseError as e:
            print(f"Failed to parse metadata XML: {e}")
            return None
    
    def xml_to_dict(self, element):
        result = {}
        
        if element.text and element.text.strip():
            result['text'] = element.text.strip()
        
        for attr, value in element.attrib.items():
            result[f'@{attr}'] = value
        
        for child in element:
            child_data = self.xml_to_dict(child)
            if child.tag in result:
                if not isinstance(result[child.tag], list):
                    result[child.tag] = [result[child.tag]]
                result[child.tag].append(child_data)
            else:
                result[child.tag] = child_data
        
        return result
    
    def get_font_info(self):
        header = self.parse_header()
        metadata = self.parse_metadata_xml()
        
        info = {
            'format': 'WOFF',
            'version': header['version'],
            'base_format': header['flavor'],
            'file_size': len(self.data),
            'compressed_size': header['length'],
            'uncompressed_size': header['total_sfnt_size'],
            'compression_ratio': f"{(1 - header['length'] / header['total_sfnt_size']) * 100:.1f}%",
            'num_tables': header['num_tables']
        }
        
        if metadata:
            info['metadata'] = metadata
        
        return info

# Usage example
def analyze_woff_font(filepath):
    analyzer = WoffAnalyzer(filepath)
    
    font_info = analyzer.get_font_info()
    print("Font Information:")
    for key, value in font_info.items():
        if key != 'metadata':
            print(f"  {key}: {value}")
    
    if 'metadata' in font_info:
        print("\nMetadata:")
        print_dict(font_info['metadata'], indent=2)

def print_dict(d, indent=0):
    for key, value in d.items():
        if isinstance(value, dict):
            print("  " * indent + f"{key}:")
            print_dict(value, indent + 1)
        elif isinstance(value, list):
            print("  " * indent + f"{key}: [list with {len(value)} items]")
        else:
            print("  " * indent + f"{key}: {value}")

# Example usage
if __name__ == "__main__":
    analyze_woff_font("example.woff")

Font Optimization and Conversion

TTF to WOFF Conversion

# Using fonttools
pip install fonttools[woff]
ttx -f -o output.woff input.ttf

# Using woff2 tools
woff2_compress input.ttf

# Using online tools or GUI applications
# - FontSquirrel Webfont Generator
# - Google Fonts helper tools

Subsetting for Performance

from fontTools import subset
from fontTools.ttLib import TTFont

def create_subset_woff(input_font, output_font, characters):
    """Create a subset WOFF font with only specified characters."""
    
    # Create subsetter
    subsetter = subset.Subsetter()
    
    # Configure options
    subsetter.options.layout_features = ['*']
    subsetter.options.name_IDs = ['*']
    subsetter.options.hinting = True
    subsetter.options.legacy_kern = True
    
    # Set character set
    subsetter.options.text = characters
    
    # Load font
    font = TTFont(input_font)
    
    # Perform subsetting
    subsetter.subset(font)
    
    # Save as WOFF
    font.save(output_font)
    font.close()

# Create subset with only Latin characters
latin_chars = ''.join(chr(i) for i in range(32, 127))
create_subset_woff('input.ttf', 'output.woff', latin_chars)

Performance Optimization

• Use font-display: swap for better loading experience
• Implement font preloading for critical fonts
• Create font subsets to reduce file size
• Use WOFF2 when possible (better compression)
• Implement progressive font loading strategies
• Consider variable fonts for multiple weights/styles

Browser Support and Fallbacks

• WOFF: Supported in all modern browsers
• Fallback strategy: Provide multiple formats
• Progressive enhancement: Start with system fonts
• Font loading detection: Use JavaScript Font Loading API

Best Practices

• Always provide fallback fonts in CSS
• Use appropriate font-display values
• Optimize font files through subsetting
• Minimize the number of font variants
• Test font rendering across different devices
• Consider accessibility and readability
• Use CDN for font delivery when appropriate

Security Considerations

• Validate font files from untrusted sources
• Be aware of font-based fingerprinting
• Consider CORS policies for cross-origin fonts
• Monitor for malformed font attacks
• Use Content Security Policy for font sources