### CSS for Icon Font Display

Source: https://github.com/filamentgroup/glyphhanger/blob/master/test/pseudos/test.html

This CSS demonstrates how to use custom icon fonts by defining the font-family and content property for pseudo-elements. It shows examples for a general icon and a specific quote icon.

```CSS
.icon:before { font-family: My Icon Font; content: "\\e6ac"; }
.icon-quote:after { font-family: My Second Icon Font; content: "'"; }
```

--------------------------------

### Manage Whitelists and Character Presets

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

Explains how to use built-in character presets like US_ASCII or LATIN, and how to combine them with custom whitelists to control subsetting output.

```bash
glyphhanger --whitelist=ABCDEF
glyphhanger --US_ASCII
glyphhanger --LATIN
glyphhanger --US_ASCII --whitelist='àáâãäåæç'
glyphhanger --US_ASCII --subset=./font.ttf
glyphhanger https://example.com --US_ASCII --subset=./font.ttf
```

--------------------------------

### Manual Subsetting with pyftsubset (Bash)

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

This section shows how to use Glyphhanger in conjunction with the pyftsubset command-line tool for manual font subsetting. It covers generating unicode ranges, creating WOFF2, WOFF, and TTF subsets, preserving layout features, and cleaning up temporary files.

```bash
# Generate unicode range and save to file
glyphhanger https://example.com > glyphs.txt

# Use pyftsubset directly with the output
pyftsubset myfont.ttf --unicodes-file=glyphs.txt --flavor=woff2
# Creates: myfont.subset.woff2

# Create WOFF with zopfli compression
pyftsubset myfont.ttf --unicodes-file=glyphs.txt --flavor=woff --with-zopfli
# Creates: myfont.subset.woff

# Create TTF subset for Android compatibility
pyftsubset myfont.ttf --unicodes-file=glyphs.txt
# Creates: myfont.subset.ttf

# Preserve all OpenType layout features
pyftsubset myfont.ttf --unicodes-file=glyphs.txt --layout-features='*' --flavor=woff2

# Clean up
rm glyphs.txt
```

--------------------------------

### CLI Subsetting with pyftsubset

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

Advanced manual subsetting workflow using Glyphhanger output with the pyftsubset command-line tool.

```APIDOC
## CLI: Manual Subsetting

### Description
Use Glyphhanger to extract required unicode characters from a website and pass them to pyftsubset for optimized font generation.

### Usage
1. **Extract Unicode**: `glyphhanger https://example.com > glyphs.txt`
2. **Subset Font**: `pyftsubset myfont.ttf --unicodes-file=glyphs.txt --flavor=woff2`

### Parameters
- **--unicodes-file**: Path to the file containing extracted unicode ranges.
- **--flavor**: Output format (woff, woff2, ttf).
- **--layout-features**: Preserve OpenType layout features (e.g., '*').

### Response Example
Creates: myfont.subset.woff2
```

--------------------------------

### Subset Font Files

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

Shows how to generate optimized font subsets from TTF files based on whitelists, URL analysis, or glob patterns. Supports custom output formats, directories, and automatic CSS @font-face generation.

```bash
glyphhanger --whitelist=ABCDEFGHIJ --subset=./fonts/myfont.ttf
glyphhanger https://example.com --subset=./fonts/myfont.ttf
glyphhanger https://example.com --subset='./fonts/*.ttf'
glyphhanger --whitelist=ABCD --subset=./font.ttf --formats=woff2,woff
glyphhanger --whitelist=ABCD --subset=./font.ttf --output=./dist/fonts/
glyphhanger --whitelist=ABCD --subset=./font.ttf --css --family='My Font'
```

--------------------------------

### Process HTML via Standard Input (CLI)

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

This command-line interface (CLI) mode processes HTML content piped through standard input using the JSDOM environment. It's useful for quick analysis of HTML snippets or files without needing to specify a URL. Dependencies include Node.js and the glyphhanger package.

```bash
echo "<div>Hello World</div>" | glyphhanger --jsdom
# Output: U+20,U+48,U+57,U+64-65,U+6C,U+6F,U+72

cat ./page.html | glyphhanger --jsdom

curl -s https://example.com | glyphhanger --jsdom

echo "<span>Custom Text</span>" | glyphhanger --jsdom --subset=./font.ttf
```

--------------------------------

### Analyze Web Pages for Character Usage

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

Demonstrates how to scan URLs or local files to extract unicode ranges or character strings. Options include JSON output, filtering by font family, and restricting analysis to visible elements.

```bash
npm install -g glyphhanger
glyphhanger https://example.com
glyphhanger ./test.html
glyphhanger https://example.com --string
glyphhanger https://example.com --json
glyphhanger https://example.com --family='Open Sans'
glyphhanger https://example.com --onlyVisible
glyphhanger https://example.com --cssSelector='.main-content'
glyphhanger https://example.com --timeout=60000
```

--------------------------------

### Perform Font Subsetting with pyftsubset

Source: https://github.com/filamentgroup/glyphhanger/blob/master/docs/pyftsubsethelp.txt

This command demonstrates how to create a font subset containing specific characters while preserving various tables and metadata. It disables standard optimizations to retain original font information.

```bash
pyftsubset font.ttf --unicodes="U+0020-0025" --layout-features='*' --glyph-names --symbol-cmap --legacy-cmap --notdef-glyph --notdef-outline --recommended-glyphs --name-IDs='*' --name-legacy --name-languages='*'
```

--------------------------------

### Standard Input Mode (JSDOM)

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

Process HTML content piped through standard input using the JSDOM environment. This mode is useful for quick analysis of HTML snippets or files without needing to run a full Node.js script.

```APIDOC
## Standard Input Mode (JSDOM)

Process HTML content piped through standard input using the JSDOM environment.

### Usage Examples

```bash
# Pipe HTML content directly
echo "<div>Hello World</div>" | glyphhanger --jsdom
# Output: U+20,U+48,U+57,U+64-65,U+6C,U+6F,U+72

# Pipe a file's contents
cat ./page.html | glyphhanger --jsdom

# Pipe curl output
curl -s https://example.com | glyphhanger --jsdom

# Combine with subsetting
echo "<span>Custom Text</span>" | glyphhanger --jsdom --subset=./font.ttf
```

### Parameters

- `--jsdom`: Use JSDOM environment for processing.
- `--subset=<font_path>`: Path to a font file for subsetting based on extracted characters.
```

--------------------------------

### GlyphHanger Class for URL Analysis (Node.js API)

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

The main GlyphHanger class provides programmatic access to URL analysis and character set generation within a Node.js environment. It allows for detailed configuration of output formats, font families, timeouts, and analysis scope. Dependencies include Node.js, glyphhanger, and optionally JSDOM or Puppeteer for environment.

```javascript
const GlyphHanger = require('glyphhanger');

// Create instance and configure
const gh = new GlyphHanger();

// Configure output format (true = unicode ranges, false = string characters)
gh.setUnicodesOutput(false); // Will output as unicode ranges (default)

// Set font families to filter results
gh.setFamilies('Open Sans, Roboto');

// Enable JSON output mode for per-family breakdown
gh.setJson(true);

// Set custom timeout (default: 30000ms)
gh.setTimeout(60000);

// Only analyze visible elements
gh.setVisibilityCheck(true);

// Filter by CSS selector
gh.setCSSSelector('.main-content, .sidebar');

// Add a CSS class before analysis (useful for testing different states)
gh.setClassName('loaded fonts-active');

// Use JSDOM instead of Puppeteer
gh.setEnvironmentJSDOM();

// Fetch and analyze URLs
(async () => {
  await gh.fetchUrls(['https://example.com', 'https://example.com/about']);

  // Get unicode range string
  const unicodeRange = gh.getUnicodeRange();
  console.log(unicodeRange);
  // Output: "U+20-7E,U+A0,U+2026"

  // Get all character sets (including per-family)
  const sets = gh.getSets();
  // { '*': CharacterSet, 'Open Sans': CharacterSet, ... }

  // Get set for specific font families
  const openSansSet = gh.getSetForFamilies('Open Sans');
  console.log(openSansSet.toHexRangeString());

  // Output results to console
  gh.output();
})();
```

--------------------------------

### GlyphHangerSubset Class for Font Subsetting (Node.js API)

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

The GlyphHangerSubset class handles font file subsetting using pyftsubset, supporting multiple output formats. It allows configuration of font files via glob patterns or explicit paths, output directory, and desired formats. Dependencies include Node.js, glyphhanger, and pyftsubset.

```javascript
const GlyphHangerSubset = require('glyphhanger/src/GlyphHangerSubset');

const subset = new GlyphHangerSubset();

// Set font files using glob pattern
subset.setFontFilesGlob('./fonts/*.ttf');

// Or set specific font files
subset.setFontFiles(['./fonts/regular.ttf', './fonts/bold.ttf']);

// Set output directory (optional, defaults to same directory as source)
subset.setOutputDirectory('./dist/fonts/');

// Set output formats (default: ttf,woff2,woff-zopfli)
subset.setFormats('woff2,woff');

// Subset all configured fonts with unicode range
subset.subsetAll('U+41-5A,U+61-7A');
// Creates: regular-subset.woff2, regular-subset.woff, bold-subset.woff2, bold-subset.woff

// Get configured font paths
const paths = subset.getPaths();
console.log(paths);
// Output: ['./fonts/regular.ttf', './fonts/bold.ttf']

// Get output filenames for a specific font
const filenames = subset.getFilenames('./fonts/regular.ttf', './dist/');
console.log(filenames);
// Output: ['./dist/regular-subset.woff2', './dist/regular-subset.woff']

// Get src object for @font-face CSS generation
const srcs = subset.getSrcsObject('./fonts/regular.ttf', './dist/');
console.log(srcs);
// Output: { woff2: './dist/regular-subset.woff2', woff: './dist/regular-subset.woff' }
```

--------------------------------

### GlyphHangerWhitelist Class for Character Management (Node.js API)

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

The GlyphHangerWhitelist class manages character whitelists, supporting presets and parsing of unicode ranges. It allows for creating whitelists from strings, ranges, or predefined sets like US_ASCII and LATIN. Dependencies include Node.js and glyphhanger.

```javascript
const GlyphHangerWhitelist = require('glyphhanger/src/GlyphHangerWhitelist');

// Create from character string
const whitelist = new GlyphHangerWhitelist('ABCDEFabcdef');

// Create from unicode range
const unicodeWhitelist = new GlyphHangerWhitelist('U+41-46,U+61-66');

// Create with US_ASCII preset
const asciiWhitelist = new GlyphHangerWhitelist(null, { US_ASCII: true });

// Create with LATIN preset
const latinWhitelist = new GlyphHangerWhitelist(null, { LATIN: true });

// Combine preset with custom characters
const combinedWhitelist = new GlyphHangerWhitelist('àáâãäå', { US_ASCII: true });

// Get whitelist as unicode range string
console.log(whitelist.getWhitelistAsUnicodes());
// Output: "U+41-46,U+61-66"

// Get whitelist as character string
console.log(whitelist.getWhitelist());
// Output: "ABCDEFabcdef"

// Check if whitelist is empty
if (!whitelist.isEmpty()) {
  console.log('Whitelist has characters');
}

// Get underlying CharacterSet object
const charSet = whitelist.getCharacterSet();
```

--------------------------------

### Generate @font-face CSS with GlyphHangerFontFace (JavaScript)

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

This snippet demonstrates how to use the GlyphHangerFontFace class to generate @font-face CSS rules for subsetted fonts. It allows setting font families, unicode ranges, and linking to subsetted font files. The output can be a CSS string or written directly to files.

```javascript
const GlyphHangerFontFace = require('glyphhanger/src/GlyphHangerFontFace');
const GlyphHangerSubset = require('glyphhanger/src/GlyphHangerSubset');

const fontface = new GlyphHangerFontFace();

// Set font family name for CSS output
fontface.setFamilies('My Custom Font');

// Set unicode range
fontface.setUnicodeRange('U+41-5A,U+61-7A');

// Enable CSS output
fontface.setCSSOutput(true);

// Link with subset for src paths
const subset = new GlyphHangerSubset();
subset.setFontFilesGlob('./fonts/*.ttf');
subset.setFormats('woff2,woff');
fontface.setSubset(subset);

// Generate @font-face CSS string
const css = fontface.toString('./fonts/myfont.ttf', './dist/');
console.log(css);
/* Output:
@font-face {
  font-family: My Custom Font;
  src: url(./dist/myfont-subset.woff2) format("woff2"), url(./dist/myfont-subset.woff) format("woff");
  unicode-range: U+41-5A,U+61-7A;
}
*/

// Write CSS files to disk (one per font file)
fontface.writeCSSFiles();
// Creates: myfont.css with @font-face declaration

// Output CSS to console
fontface.output();
```

--------------------------------

### GlyphHangerSubset Class

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

Handles font file subsetting using pyftsubset, supporting multiple output formats and configuration options for font files and output directories.

```APIDOC
## GlyphHangerSubset Class

Handles font file subsetting using pyftsubset with support for multiple output formats.

### Initialization

```javascript
const GlyphHangerSubset = require('glyphhanger/src/GlyphHangerSubset');
const subset = new GlyphHangerSubset();
```

### Configuration Methods

- **`setFontFilesGlob(string)`**: Set font files using a glob pattern (e.g., './fonts/*.ttf').
- **`setFontFiles(string[])`**: Set specific font files.
- **`setOutputDirectory(string)`**: Set the output directory for subsetted fonts (optional, defaults to source directory).
- **`setFormats(string)`**: Set output formats, comma-separated (default: 'ttf,woff2,woff-zopfli').

### Core Methods

- **`subsetAll(string)`**: Subsets all configured fonts with the given unicode range.
- **`getPaths()`**: Returns an array of configured font file paths.
- **`getFilenames(string, string)`**: Returns output filenames for a specific font and output directory.
- **`getSrcsObject(string, string)`**: Returns an object mapping formats to file paths for `@font-face` CSS generation.

### Example Usage

```javascript
const GlyphHangerSubset = require('glyphhanger/src/GlyphHangerSubset');

const subset = new GlyphHangerSubset();

// Set font files using glob pattern
subset.setFontFilesGlob('./fonts/*.ttf');

// Or set specific font files
subset.setFontFiles(['./fonts/regular.ttf', './fonts/bold.ttf']);

// Set output directory
subset.setOutputDirectory('./dist/fonts/');

// Set output formats
subset.setFormats('woff2,woff');

// Subset all configured fonts with unicode range
subset.subsetAll('U+41-5A,U+61-7A');
// Creates: regular-subset.woff2, regular-subset.woff, bold-subset.woff2, bold-subset.woff

// Get configured font paths
const paths = subset.getPaths();
console.log(paths);
// Output: ['./fonts/regular.ttf', './fonts/bold.ttf']

// Get output filenames for a specific font
const filenames = subset.getFilenames('./fonts/regular.ttf', './dist/');
console.log(filenames);
// Output: ['./dist/regular-subset.woff2', './dist/regular-subset.woff']

// Get src object for @font-face CSS generation
const srcs = subset.getSrcsObject('./fonts/regular.ttf', './dist/');
console.log(srcs);
// Output: { woff2: './dist/regular-subset.woff2', woff: './dist/regular-subset.woff' }
```
```

--------------------------------

### GlyphHanger Class (Node.js API)

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

The main GlyphHanger class provides programmatic access to URL analysis and character set generation within a Node.js environment. It allows for detailed configuration of analysis parameters.

```APIDOC
## GlyphHanger Class (Node.js API)

The main GlyphHanger class provides programmatic access to URL analysis and character set generation.

### Initialization

```javascript
const GlyphHanger = require('glyphhanger');
const gh = new GlyphHanger();
```

### Configuration Methods

- **`setUnicodesOutput(boolean)`**: Configure output format. `true` for unicode ranges, `false` for string characters.
- **`setFamilies(string)`**: Set font families to filter results (e.g., 'Open Sans, Roboto').
- **`setJson(boolean)`**: Enable JSON output mode for per-family breakdown.
- **`setTimeout(number)`**: Set custom request timeout in milliseconds (default: 30000).
- **`setVisibilityCheck(boolean)`**: Only analyze visible elements.
- **`setCSSSelector(string)`**: Filter analysis by CSS selector (e.g., '.main-content, .sidebar').
- **`setClassName(string)`**: Add a CSS class before analysis.
- **`setEnvironmentJSDOM()`**: Use JSDOM instead of Puppeteer for environment.

### Core Methods

- **`fetchUrls(string[])`**: Fetches and analyzes an array of URLs.
- **`getUnicodeRange()`**: Returns the unicode range string.
- **`getSets()`**: Returns all character sets, including per-family breakdowns.
- **`getSetForFamilies(string)`**: Returns the character set for specific font families.
- **`output()`**: Outputs results to the console.

### Example Usage

```javascript
const GlyphHanger = require('glyphhanger');

const gh = new GlyphHanger();
gh.setUnicodesOutput(false); // Output as string characters
gh.setFamilies('Open Sans, Roboto');
gh.setJson(true);
gh.setTimeout(60000);
gh.setVisibilityCheck(true);
gh.setCSSSelector('.main-content, .sidebar');
gh.setClassName('loaded fonts-active');
gh.setEnvironmentJSDOM();

(async () => {
  await gh.fetchUrls(['https://example.com', 'https://example.com/about']);

  const unicodeRange = gh.getUnicodeRange();
  console.log(unicodeRange);

  const sets = gh.getSets();
  console.log(sets);

  const openSansSet = gh.getSetForFamilies('Open Sans');
  console.log(openSansSet.toHexRangeString());

  gh.output();
})();
```
```

--------------------------------

### GlyphHangerFontFace Class API

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

Programmatically generate @font-face CSS blocks and manage font subsetting configurations.

```APIDOC
## Class: GlyphHangerFontFace

### Description
The GlyphHangerFontFace class is used to generate @font-face CSS blocks for subsetted fonts, including unicode-range declarations.

### Methods
- **setFamilies(name)**: Sets the font-family name for the generated CSS.
- **setUnicodeRange(range)**: Sets the unicode-range string (e.g., 'U+41-5A').
- **setCSSOutput(boolean)**: Enables or disables CSS output.
- **setSubset(subsetInstance)**: Links a GlyphHangerSubset instance for src path resolution.
- **toString(fontPath, outputPath)**: Generates and returns the @font-face CSS string.
- **writeCSSFiles()**: Writes generated CSS files to the disk.

### Request Example
```javascript
const fontface = new GlyphHangerFontFace();
fontface.setFamilies('My Custom Font');
fontface.setUnicodeRange('U+41-5A');
fontface.writeCSSFiles();
```
```

--------------------------------

### Add Div on Window Load - JavaScript

Source: https://github.com/filamentgroup/glyphhanger/blob/master/test/test-delayed-content.html

This snippet adds a new div element with the text 'def' to the document's body when the window's 'load' event fires. It ensures the DOM is fully loaded and all resources are available before execution.

```javascript
window.addEventListener( "load", function() { var div = document.createElement( "div" ); div.innerHTML = "def"; document.body.appendChild( div ); }, false );
```

--------------------------------

### GlyphHangerWhitelist Class

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

Manages character whitelists with support for presets and unicode range parsing. This class helps in defining specific characters to include or exclude.

```APIDOC
## GlyphHangerWhitelist Class

Manages character whitelists with support for presets and unicode range parsing.

### Initialization

- **`new GlyphHangerWhitelist(characters?, options?)`**
  - `characters` (string): A string of characters to whitelist.
  - `options` (object): Configuration options.
    - `US_ASCII` (boolean): Include US-ASCII preset.
    - `LATIN` (boolean): Include LATIN preset.

### Example Usage

```javascript
const GlyphHangerWhitelist = require('glyphhanger/src/GlyphHangerWhitelist');

// Create from character string
const whitelist = new GlyphHangerWhitelist('ABCDEFabcdef');

// Create from unicode range
const unicodeWhitelist = new GlyphHangerWhitelist('U+41-46,U+61-66');

// Create with US_ASCII preset
const asciiWhitelist = new GlyphHangerWhitelist(null, { US_ASCII: true });

// Create with LATIN preset
const latinWhitelist = new GlyphHangerWhitelist(null, { LATIN: true });

// Combine preset with custom characters
const combinedWhitelist = new GlyphHangerWhitelist('àáâãäå', { US_ASCII: true });

// Get whitelist as unicode range string
console.log(whitelist.getWhitelistAsUnicodes());
// Output: "U+41-46,U+61-66"

// Get whitelist as character string
console.log(whitelist.getWhitelist());
// Output: "ABCDEFabcdef"

// Check if whitelist is empty
if (!whitelist.isEmpty()) {
  console.log('Whitelist has characters');
}

// Get underlying CharacterSet object
const charSet = whitelist.getCharacterSet();
```
```

--------------------------------

### Crawl Websites with Spider Mode

Source: https://context7.com/filamentgroup/glyphhanger/llms.txt

Utilizes spider mode to crawl multiple pages on a website to aggregate character usage data across the entire site, with configurable page limits.

```bash
glyphhanger https://example.com --spider
glyphhanger https://example.com --spider-limit=50
glyphhanger https://example.com --spider-limit=0
glyphhanger https://example.com --spider --subset='./fonts/*.ttf'
```

--------------------------------

### Inject DOM elements on page lifecycle events

Source: https://github.com/filamentgroup/glyphhanger/blob/master/test/test-onload-content.html

This snippet attaches event listeners to the window object for both the load and DOMContentLoaded events. When triggered, it creates a new div element with specific text content and appends it to the document body.

```javascript
window.addEventListener( "load", function() { var div = document.createElement( "div" ); div.innerHTML = "def"; document.body.appendChild( div ); }, false );
window.addEventListener( "DOMContentLoaded", function() { var div = document.createElement( "div" ); div.innerHTML = "ghi"; document.body.appendChild( div ); }, false );
```

--------------------------------

### Add Div on DOMContentLoaded - JavaScript

Source: https://github.com/filamentgroup/glyphhanger/blob/master/test/test-delayed-content.html

This snippet adds a new div element with the text 'ghi' to the document's body when the 'DOMContentLoaded' event fires. This event triggers as soon as the HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.

```javascript
window.addEventListener( "DOMContentLoaded", function() { var div = document.createElement( "div" ); div.innerHTML = "ghi"; document.body.appendChild( div ); }, false );
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.