How to Export Web Compatible WOFF2 in FontForge

Exporting web-compatible WOFF2 files from FontForge requires preparing clean vector outlines, setting consistent vertical metrics, validating the glyph set, and configuring the correct output options. By resolving geometry errors, standardizing metadata, and pairing the resulting WOFF2 file with proper @font-face CSS declarations, you can ensure your web font renders reliably, loads quickly, and displays without clipping or visual artifacts across all modern web browsers.

1. Clean and Validate Glyph Outlines

Browsers rely on strict rasterization engines. Malformed outlines cause rendering glitches, missing glyphs, or complete font-loading failures.

  • Correct Path Direction: Web fonts require consistent winding rules. Select all glyphs (Ctrl+A), then navigate to Element > Correct Direction to ensure counter-spaces (like the hole in an "O") render transparently.
  • Remove Overlaps: Merged contours prevent rasterizer errors. Go to Element > Overlap > Remove Overlap.
  • Round to Integer Coordinates: Non-integer coordinates bloat file sizes and lead to rendering inconsistencies. Select all glyphs and run Element > Round > To Int.
  • Simplify Points: Extraneous points increase the WOFF2 payload without visual benefit. Use Element > Simplify > Simplify to strip redundant nodes while preserving the original curves.

2. Standardize Font Metrics and Tables

Vertical clipping on websites is almost always caused by conflicting line-height and bounding box metrics in the font's metadata tables.

  • Navigate to Element > Font Info > General. Ensure the Em Size (UPM) is set to a standard value, typically 1000 (for PostScript/CFF curves) or 1024 / 2048 (for TrueType curves).
  • Navigate to Element > Font Info > OS/2 > Metrics.
  • Ensure Win Ascent and Win Descent match the absolute top and bottom coordinates of your tallest and lowest glyphs.
  • Set Typo Ascent and Typo Descent to balance your layout line-height, and check Use Typo Metrics to force modern browsers to use these consistent values instead of platform-specific defaults.

3. Run FontForge’s Built-In Validator

Before compiling to WOFF2, use the internal validation tool to detect fatal font errors:

  1. Go to Element > Validation > Find Problems.
  2. Enable checks for missing points at extrema, self-intersecting paths, flipped references, and open contours.
  3. Fix any flagged critical errors before exporting.

4. Export the WOFF2 File

FontForge uses the Brotli compression algorithm natively to build WOFF2 files.

  1. Go to File > Generate Fonts.
  2. In the dropdown menu under the file name, select WOFF2.
  3. Choose the underlying format based on your curve design: choose TrueType for standard web fonts or OpenType (CFF) if you optimized for PostScript curves. TrueType generally offers the broadest rendering consistency across Windows (ClearType) environments.
  4. Click Options next to the format selection:
    • Check Validate Before Saving to catch last-second errors.
    • Check Round to strip stray decimal coordinates.
    • Uncheck debugging tables and non-essential OpenType tables to keep the payload minimal.
  5. Click Generate. If FontForge displays a warning about non-standard glyph names or minor metric warnings, review them, resolve any critical outline warnings, and proceed.

5. Verify the Output for the Web

Ensure cross-browser support and proper visual output with these final verification steps:

  • Implement Proper CSS: Define the font using @font-face with font-display: swap; and specify format('woff2'). Include standard WOFF as a fallback format only if you must support legacy browsers.
  • Check in an Inspector: Open the exported font in modern browsers (Chrome, Firefox, Safari) and inspect the computed line-height and layout rendering via Developer Tools to verify that characters do not clip at the top or baseline.