### Install and Use Font-Spider CLI

Source: https://context7.com/aui/font-spider/llms.txt

Installs Font-Spider globally and demonstrates basic command-line usage for compressing fonts in HTML files. Supports single files, multiple files, wildcards, and options to disable backups, show info, ignore files, map paths, and enable debug mode.

```bash
# Install globally
npm install font-spider -g

# Compress fonts in single HTML file
font-spider index.html

# Compress fonts in multiple HTML files
font-spider dest/news.html dest/index.html dest/about.html

# Use wildcard to process multiple files
font-spider dest/*.html

# Disable backup of original fonts
font-spider --no-backup index.html

# Show webfont information without compression
font-spider --info http://fontawesome.io

# Ignore specific files using regex pattern
font-spider --ignore "icon\.css$" dest/*.html

# Map remote paths to local paths for compression
font-spider --map "http://font-spider.org/font,/Website/font" http://font-spider.org/index.html

# Enable debug mode to see detailed processing information
font-spider --debug --no-backup test/demo/**/*.html
```

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

### Grunt Integration for Font Optimization (Configuration Example)

Source: https://context7.com/aui/font-spider/llms.txt

Illustrates how to configure and integrate font-spider within a Grunt build system using the grunt-font-spider plugin. This snippet shows the typical Grunt configuration structure.

```javascript
// Grunt integration (with grunt-font-spider plugin)
// grunt.loadNpmTasks('grunt-font-spider');
// grunt.initConfig({
//     fontspider: {
//         options: { backup: true },
//         main: { src: './dist/**/*.html' }
//     }
// });

```

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

### Install font-spider CLI

Source: https://github.com/aui/font-spider/blob/master/README.md

Installs the font-spider command-line interface globally using npm. This allows you to use font-spider commands directly in your terminal.

```shell
npm install font-spider -g
```

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

### Gulp Integration for Font Optimization in JavaScript

Source: https://context7.com/aui/font-spider/llms.txt

Integrate font-spider into Gulp build pipelines for automated font optimization. This example shows how to run font-spider as a Gulp task and also demonstrates the usage of the gulp-font-spider plugin.

```javascript
// Gulp integration example
var gulp = require('gulp');
var fontSpider = require('font-spider');

gulp.task('fontspider', function(done) {
    // Process HTML files after build
    fontSpider(['./dist/**/*.html'], {
        backup: false,  // No backup in production builds
        silent: true,
        debug: false
    }).then(function(webFonts) {
        console.log('Fonts optimized:', webFonts.length);
        done();
    }).catch(function(errors) {
        console.error('Font optimization failed:', errors);
        done(errors);
    });
});

// Build pipeline
gulp.task('build', gulp.series('compile-html', 'compile-css', 'fontspider'));

// For gulp-font-spider plugin (install separately)
var gulpFontSpider = require('gulp-font-spider');

gulp.task('optimize-fonts', function() {
    return gulp.src('./dist/**/*.html')
        .pipe(gulpFontSpider({
            backup: true,
            ignore: [],
            map: []
        }));
});

```

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

### Configure CSS for font-spider

Source: https://github.com/aui/font-spider/blob/master/README.md

Example CSS demonstrating how to define web fonts using @font-face. It specifies multiple font formats for cross-browser compatibility and includes a comment for font-spider to identify the font to be compressed. Ensure the .ttf file is present.

```css
@font-face {
  font-family: 'source';
  src: url('../font/source.eot');
  src:
    url('../font/source.eot?#font-spider') format('embedded-opentype'),
    url('../font/source.woff2') format('woff2'),
    url('../font/source.woff') format('woff'),
    url('../font/source.ttf') format('truetype'),
    url('../font/source.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

.home h1, .demo > .test {
    font-family: 'source';
}
```

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

### font-spider CLI Options

Source: https://github.com/aui/font-spider/blob/master/README.md

Lists the available options for the font-spider command-line tool, including help, version, info, ignore, map, no-backup, and debug.

```shell
Usage: font-spider [options] <htmlFile ...>

Options:

  -h, --help                    output usage information
  -V, --version                 output the version number
  --info                        show only webfont information
  --ignore <pattern>            ignore the files
  --map <remotePath,localPath>  mapping the remote path to the local
  --no-backup                   do not back up fonts
  --debug                       enable debug mode
```

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

### font-spider CLI Help

Source: https://github.com/aui/font-spider/blob/master/README.md

Displays the help information for the font-spider command-line tool, outlining available options and usage.

```shell
font-spider [options] <htmlFile ...>
```

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

### Full Font Processing Pipeline with fontSpider in JavaScript

Source: https://context7.com/aui/font-spider/llms.txt

This snippet illustrates the complete font processing workflow using font-spider, combining both spider analysis and font compression in a single operation. It shows two primary methods: using a callback function for handling results and using Promises for asynchronous operations. The configuration options allow for customization of the spidering and compression process, including ignoring files, mapping resources, enabling backups, and setting resource timeouts.

```javascript
var fontSpider = require('font-spider');

// Using the main runner function (combines spider + compressor)
fontSpider([
    './dist/index.html',
    './dist/about.html'
], {
    ignore: [],
    map: [],
    backup: true,
    unique: true,
    sort: true,
    debug: false,
    silent: false,
    resourceTimeout: 8000,
    resourceMaxNumber: 64,
    resourceCache: true
}, function(errors, webFonts) {
    if (errors) {
        console.error('Font processing failed:', errors);
        return;
    }

    console.log('Font processing complete!');
    webFonts.forEach(function(webFont) {
        console.log('
Font Family:', webFont.family);
        console.log('Original Size:', (webFont.originalSize / 1024).toFixed(2), 'KB');
        console.log('Characters:', webFont.chars);
        console.log('Character Count:', webFont.chars.length);
        console.log('Selectors:', webFont.selectors.join(', '));

        console.log('Generated Files:');
        webFont.files.forEach(function(file) {
            var newSize = (file.size / 1024).toFixed(2);
            var savings = (100 - file.size / webFont.originalSize * 100).toFixed(1);
            console.log('  -', file.url, ':', newSize, 'KB', '(saved', savings + '%)');
        });
    });
});

// Using Promises instead of callbacks
fontSpider([__dirname + '/public/*.html'], {
    backup: true,
    debug: false
}).then(function(webFonts) {
    console.log('Success! Processed', webFonts.length, 'fonts');
    return webFonts;
}).catch(function(errors) {
    console.error('Error:', errors.message);
    process.exit(1);
});
```

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

### Show WebFont Information

Source: https://github.com/aui/font-spider/blob/master/README.md

Uses the --info option to display information about the WebFonts used on a given website. This helps in identifying which fonts are being utilized without performing compression.

```shell
font-spider --info http://fontawesome.io
```

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

### Compress Font Files using fontSpider.compressor() in JavaScript

Source: https://context7.com/aui/font-spider/llms.txt

This snippet demonstrates how to use the fontSpider.compressor() function to compress font files. It shows both a sequential process of spidering and then compressing, as well as direct compression using pre-defined webFont data. The function takes an array of webFont objects and an options object, returning Promises that resolve with the compressed webFont data. The backup option allows for creating backups of the original fonts.

```javascript
var fontSpider = require('font-spider');

// First spider, then compress
fontSpider.spider([__dirname + '/index.html'], {
    silent: false
}).then(function(webFonts) {
    console.log('Fonts discovered:', webFonts.length);

    // Compress the discovered fonts
    return fontSpider.compressor(webFonts, {
        backup: true  // Backup original fonts to .font-spider directory
    });
}).then(function(webFonts) {
    // Compression complete
    webFonts.forEach(function(webFont) {
        console.log('Font family:', webFont.family);
        console.log('Original size:', webFont.originalSize, 'bytes');
        console.log('Characters included:', webFont.chars);

        webFont.files.forEach(function(file) {
            console.log('Generated:', file.url);
            console.log('Format:', file.format);
            console.log('New size:', file.size, 'bytes');
            console.log('Compression ratio:',
                (100 - file.size / webFont.originalSize * 100).toFixed(2) + '%');
        });
    });
}).catch(function(errors) {
    console.error('Compression failed:', errors);
});

// Direct compression with webFont data
var webFonts = [{
    family: 'MyFont',
    chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
    files: [{
        url: '/path/to/font.ttf',
        format: 'truetype'
    }]
}];

fontSpider.compressor(webFonts, {backup: false}).then(function(result) {
    console.log('Compression complete:', result);
});
```

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

### fontSpider() - Full Pipeline (Analyze and Compress)

Source: https://context7.com/aui/font-spider/llms.txt

Executes the complete font processing workflow, combining spider analysis and font compression in a single operation.

```APIDOC
## fontSpider()

### Description
This function orchestrates the entire font processing pipeline, including spidering HTML files to identify character usage and then compressing the discovered fonts. It can be used with either a callback function or Promises for handling results.

### Method
`fontSpider(entryFiles, [options], [callback])` or `fontSpider(entryFiles, [options])`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **entryFiles** (Array<String> | String) - Required - An array of file paths or a single file path to the HTML files to be analyzed.
- **options** (Object) - Optional - Configuration options for the pipeline.
  - **ignore** (Array<String>) - Optional - File paths or patterns to ignore during analysis.
  - **map** (Array<String>) - Optional - Mapping configurations (details not specified).
  - **backup** (Boolean) - Optional - If true, backs up original fonts to a '.font-spider' directory. Defaults to false.
  - **unique** (Boolean) - Optional - If true, ensures unique font processing. Defaults to false.
  - **sort** (Boolean) - Optional - If true, sorts the processed fonts. Defaults to false.
  - **debug** (Boolean) - Optional - If true, enables debug mode. Defaults to false.
  - **silent** (Boolean) - Optional - If true, suppresses console output. Defaults to false.
  - **resourceTimeout** (Number) - Optional - Timeout in milliseconds for resource loading. Defaults to 8000.
  - **resourceMaxNumber** (Number) - Optional - Maximum number of resources to process. Defaults to 64.
  - **resourceCache** (Boolean) - Optional - If true, enables resource caching. Defaults to true.
- **callback** (Function) - Optional - A callback function to handle the results. Receives `errors` and `webFonts` as arguments.

### Request Example
```javascript
// Using callback
fontSpider(['./dist/index.html'], { backup: true }, function(errors, webFonts) {
    if (errors) {
        console.error('Font processing failed:', errors);
        return;
    }
    console.log('Font processing complete!');
});

// Using Promises
fontSpider(['./public/*.html'], { debug: false })
    .then(function(webFonts) {
        console.log('Success! Processed', webFonts.length, 'fonts');
    })
    .catch(function(errors) {
        console.error('Error:', errors.message);
    });
```

### Response
#### Success Response (Callback or Promise resolves with Array<Object>)
- **webFonts** (Array<Object>) - An array of processed web font objects. Each object contains information about the font family, original size, included characters, selectors, and generated files.
  - **family** (String) - The font family name.
  - **originalSize** (Number) - The original size of the font in bytes.
  - **chars** (String) - The characters included in the compressed font.
  - **selectors** (Array<String>) - CSS selectors associated with the font.
  - **files** (Array<Object>) - An array of generated font file objects.
    - **url** (String) - The URL of the generated font file.
    - **format** (String) - The format of the generated font file.
    - **size** (Number) - The size of the generated font file in bytes.

#### Response Example
```json
[
  {
    "family": "MyFont",
    "originalSize": 15360,
    "chars": " !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~",
    "selectors": [".my-class", ".another-class"],
    "files": [
      {
        "url": "/fonts/myfont.woff2",
        "format": "woff2",
        "size": 8192
      }
    ]
  }
]
```
```

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

### Compress WebFonts with Wildcards

Source: https://github.com/aui/font-spider/blob/master/README.md

Uses a wildcard character to compress WebFonts for multiple HTML files in a directory. This is a convenient way to process several files at once.

```shell
font-spider dest/*.html
```

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

### Compress WebFonts using font-spider CLI

Source: https://github.com/aui/font-spider/blob/master/README.md

Compresses WebFonts for specified HTML files. You can provide multiple HTML file paths or use wildcards. The tool analyzes the HTML to find used fonts and compresses them.

```shell
font-spider dest/news.html dest/index.html dest/about.html
```

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

### Ignore Files During Compression

Source: https://github.com/aui/font-spider/blob/master/README.md

Uses the --ignore option to exclude specific files from the compression process. This is useful for preventing certain CSS or HTML files from being analyzed.

```shell
font-spider --ignore "icon\\.css$" dest/*.html
```

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

### Advanced Configuration for Font-Spider in JavaScript

Source: https://context7.com/aui/font-spider/llms.txt

Configure font-spider behavior with detailed options for resource loading, path mapping, and debugging. This script uses the font-spider Node.js API to process HTML files with advanced settings.

```javascript
var fontSpider = require('font-spider');

var advancedOptions = {
    // File filtering
    ignore: ['icon\.css$', 'vendor\.css$'],  // Regex patterns to ignore

    // Path mapping for remote fonts
    map: [
        ['http://cdn.example.com/fonts', __dirname + '/local/fonts'],
        ['https://fonts.example.com', '/var/www/fonts']
    ],

    // Font processing options
    backup: true,      // Backup original fonts before compression
    unique: true,      // Remove duplicate characters
    sort: true,        // Sort characters alphabetically

    // Debug and logging
    debug: false,      // Enable detailed debug output
    silent: true,      // Suppress internal parsing errors

    // Resource loading configuration
    loadCssFile: true,           // Load external CSS files
    resourceTimeout: 8000,       // Timeout for resource loading (ms)
    resourceMaxNumber: 64,       // Maximum number of resources to load
    resourceCache: true,         // Cache successfully loaded resources

    // Custom resource handlers
    resourceMap: function(file) {
        // Custom path mapping logic
        if (file.startsWith('http://old.example.com')) {
            return file.replace('http://old.example.com', '/local/path');
        }
        return file;
    },

    resourceIgnore: function(file) {
        // Custom ignore logic
        return file.includes('node_modules') || file.endsWith('.min.css');
    },

    resourceBeforeLoad: function(file) {
        // Hook before loading each resource
        console.log('Loading:', file);
    },

    resourceRequestHeaders: function(file) {
        // Custom HTTP headers for remote resources
        return {
            'accept-encoding': 'gzip,deflate',
            'user-agent': 'font-spider/1.3.5'
        };
    }
};

fontSpider.spider(['./public/**/*.html'], advancedOptions)
    .then(function(webFonts) {
        return fontSpider.compressor(webFonts, advancedOptions);
    })
    .then(function(webFonts) {
        console.log('Processing complete with advanced options');
        console.log('Processed fonts:', webFonts.map(f => f.family).join(', '));
    })
    .catch(function(errors) {
        console.error('Failed:', errors);
    });

```

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

### Map Remote to Local Paths for Compression

Source: https://github.com/aui/font-spider/blob/master/README.md

Uses the --map option to map remote font paths to local paths when compressing fonts from an online page. This allows font-spider to access and compress fonts that are hosted remotely but served locally during the analysis.

```shell
font-spider --map "http://font-spider.org/font,/Website/font" http://font-spider.org/index.html
```

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

### Analyze Font Usage with fontSpider.spider() API

Source: https://context7.com/aui/font-spider/llms.txt

Uses the Node.js font-spider API to analyze HTML files for webfont usage and character subsetting. It returns a Promise that resolves with an array of WebFont objects, detailing font families, used characters, selectors, and files. Supports options for ignoring files, mapping paths, unique characters, sorting, loading CSS, debug mode, and timeouts.

```javascript
var fontSpider = require('font-spider');

// Analyze single HTML file
fontSpider.spider([__dirname + '/index.html'], {
    silent: false,
    debug: true
}).then(function(webFonts) {
    // webFonts is an array of WebFont objects
    console.log('Fonts found:', webFonts.length);

    webFonts.forEach(function(webFont) {
        console.log('Font family:', webFont.family);
        console.log('Characters used:', webFont.chars);
        console.log('Character count:', webFont.chars.length);
        console.log('CSS selectors:', webFont.selectors);
        console.log('Font files:', webFont.files);
    });
}).catch(function(errors) {
    console.error('Analysis failed:', errors.message);
});

// Analyze multiple HTML files with options
fontSpider.spider([
    './pages/index.html',
    './pages/about.html',
    './pages/contact.html'
], {
    ignore: ['icon\.css$'],  // Ignore files matching pattern
    map: [['http://example.com/fonts', __dirname + '/fonts']], // Map remote to local
    unique: true,  // Remove duplicate characters
    sort: true,    // Sort characters
    loadCssFile: true,  // Load external CSS files
    debug: false,  // Enable debug output
    resourceTimeout: 8000  // Request timeout in milliseconds
}).then(function(webFonts) {
    // Process discovered fonts
    console.log('Total fonts discovered:', webFonts.length);
    return webFonts;
}).catch(function(errors) {
    console.error(errors);
});
```

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

### fontSpider.compressor() - Font Compression Engine

Source: https://context7.com/aui/font-spider/llms.txt

Compresses and converts font files based on character usage information. It can operate on discovered web fonts or directly on provided web font data.

```APIDOC
## fontSpider.compressor()

### Description
Compresses and converts font files based on character usage information obtained from spider analysis. This function can be used after spider analysis or with pre-defined web font data.

### Method
`fontSpider.compressor(webFonts, [options])`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **webFonts** (Array<Object>) - Required - An array of web font objects. Each object should have `family`, `chars`, and `files` properties.
  - **family** (String) - The name of the font family.
  - **chars** (String) - A string of characters to include in the compressed font.
  - **files** (Array<Object>) - An array of font file objects.
    - **url** (String) - The path to the font file.
    - **format** (String) - The format of the font file (e.g., 'truetype', 'woff').
- **options** (Object) - Optional - Configuration options for compression.
  - **backup** (Boolean) - Optional - If true, backs up original fonts to a '.font-spider' directory. Defaults to false.

### Request Example
```javascript
var webFonts = [{
    family: 'MyFont',
    chars: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
    files: [{
        url: '/path/to/font.ttf',
        format: 'truetype'
    }]
}];

fontSpider.compressor(webFonts, {backup: true});
```

### Response
#### Success Response (Promise resolves with Array<Object>)
- **webFonts** (Array<Object>) - An array of processed web font objects. Each object contains information about the generated font files.
  - **family** (String) - The font family name.
  - **originalSize** (Number) - The original size of the font in bytes.
  - **chars** (String) - The characters included in the compressed font.
  - **files** (Array<Object>) - An array of generated font file objects.
    - **url** (String) - The URL of the generated font file.
    - **format** (String) - The format of the generated font file.
    - **size** (Number) - The size of the generated font file in bytes.

#### Response Example
```json
[
  {
    "family": "MyFont",
    "originalSize": 12345,
    "chars": "ABCDEFGHJIJKLMNOPQRSTUVWXYZ0123456789",
    "files": [
      {
        "url": "/path/to/font.woff",
        "format": "woff",
        "size": 6789
      }
    ]
  }
]
```
```

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

### CSS @font-face Declaration for Font-Spider

Source: https://context7.com/aui/font-spider/llms.txt

Defines webfonts using the CSS @font-face rule, including multiple format declarations. Font-Spider will process these declarations to identify used characters and generate necessary font formats. The TTF file is required, while other formats are generated.

```css
/* Declare font-face with all format variants */
@font-face {
  font-family: 'source';
  src: url('../font/source.eot');
  src:
    url('../font/source.eot?#font-spider') format('embedded-opentype'),
    url('../font/source.woff2') format('woff2'),
    url('../font/source.woff') format('woff'),
    url('../font/source.ttf') format('truetype'),
    url('../font/source.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Use the custom font in your CSS */
.home h1, .demo > .test {
    font-family: 'source';
}

/* Font-spider will:
 * 1. Find all elements matching .home h1 and .demo > .test
 * 2. Extract the text content from these elements
 * 3. Identify unique characters used
 * 4. Compress the TTF file to include only those characters
 * 5. Generate WOFF, WOFF2, EOT, and SVG formats automatically
 * 6. Back up original fonts to .font-spider directory
 * Note: The TTF file must exist - other formats are generated
 */
```

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