Export FontForge Character Maps as HTML

FontForge does not include a direct one-click button to export character maps to HTML, but you can quickly generate comprehensive, interactive HTML documentation using FontForge's built-in Python scripting engine. This guide explains how to extract glyph data, map Unicode points, and generate a standalone HTML character sheet directly through the FontForge interface or via the command line.

Method 1: Using the FontForge GUI Script Executor

You can run an automated generation script directly inside FontForge without installing external dependencies.

Open Your Font: Launch FontForge and open the font file (.sfd, .ttf, or .otf) you want to document.
Open the Script Window: Go to File > Execute Script... in the main menu bar.
Select Python: Ensure the radio button is set to Python (not FF Script).
Input the Generation Script: Paste the following script into the text area:

import fontforge

font = fontforge.activeFont()
html_filename = f"{font.fontname}_charmap.html"

html_content = f"""<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{font.fontname} Character Map</title>
<style>
  body {{ font-family: sans-serif; padding: 20px; background: #f8f9fa; }}
  h1 {{ margin-bottom: 5px; }}
  .meta {{ color: #666; margin-bottom: 20px; }}
  .grid {{ display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }}
  .cell {{ background: white; border: 1px solid #ddd; border-radius: 4px; padding: 10px; text-align: center; }}
  .char {{ font-size: 32px; height: 45px; line-height: 45px; margin-bottom: 5px; }}
  .code {{ font-size: 11px; color: #888; font-family: monospace; }}
  .name {{ font-size: 10px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }}
</style>
</head>
<body>
<h1>{font.fontname}</h1>
<div class="meta">Family: {font.familyname} | Version: {font.version}</div>
<div class="grid">
"""

for glyph in font.glyphs():
    if glyph.unicode > 0:
        char_entity = f"&#{glyph.unicode};"
        hex_code = f"U+{glyph.unicode:04X}"
        html_content += f"""  <div class="cell">
    <div class="char">{char_entity}</div>
    <div class="code">{hex_code}</div>
    <div class="name">{glyph.glyphname}</div>
  </div>\n"""

html_content += """</div>
</body>
</html>"""

with open(html_filename, "w", encoding="utf-8") as f:
    f.write(html_content)

print(f"Documentation exported successfully to {html_filename}")

Execute: Click OK. FontForge will generate the .html file in the working directory where the font or FontForge process was launched.

Method 2: Batch Export via Command Line

For automated workflows, you can execute the export without opening the graphical interface:

Save the Python script above as export_html.py, but replace font = fontforge.activeFont() with:

import sys
import fontforge

font = fontforge.open(sys.argv[1])

Run the command in your terminal:

fontforge -script export_html.py yourfont.ttf

This generates a structured HTML character map file showing every Unicode-mapped glyph, its character name, and its hexadecimal code point. To display uninstalled fonts correctly inside the HTML page, place a web-font export (.woff or .woff2) in the same folder and link it via a @font-face CSS rule.