# Font Explorer

Tools for parsing and visualizing existing font files to understand font structure.

## Files

- **font-parser.js**: JavaScript class for parsing TTF/WOFF font files using opentype.js
- **font-visualizer.html**: Interactive web tool for exploring font structure visually

## Usage

### Font Parser (JavaScript)

```javascript
const parser = new FontParser();

// Load font from file
const arrayBuffer = await file.arrayBuffer();
const fontData = await parser.loadFont(arrayBuffer);

// Or load from URL
const fontData = await parser.loadFont('https://example.com/font.ttf');

// Access font data
console.log(fontData.metadata);    // Font metadata
console.log(fontData.metrics);      // Font metrics
console.log(fontData.glyphs);       // All glyphs
console.log(fontData.characterMap); // Unicode to glyph mapping
console.log(fontData.kerning);      // Kerning pairs

// Get specific glyph
const glyph = parser.getGlyphByChar('A');

// Get glyphs for text
const glyphs = parser.getGlyphsForText('Hello');
```

### Font Visualizer (HTML)

1. Open `font-visualizer.html` in a web browser
2. Click "Choose Font File" and select a TTF, OTF, or WOFF file
3. Explore:
   - Font metadata and metrics
   - All glyphs in a grid view
   - Individual glyph details with visualizations
   - Search functionality

## Dependencies

- **opentype.js**: Loaded via CDN in font-visualizer.html
- For font-parser.js as a module, install: `npm install opentype.js`

## Features

- Parse TTF, OTF, WOFF, and WOFF2 fonts
- Extract comprehensive font metadata
- Visualize glyph paths
- Display font metrics (baseline, ascender, descender, etc.)
- Search and filter glyphs
- View detailed glyph information with bounding boxes