Quick Start

A TypeScript library for managing web font loading with support for multiple sources, validation, and error handling. Initially developed to solve canvas rendering issues with custom fonts in React applications, this library provides a simple API for loading fonts from URLs, files, or buffer data. It also includes built-in validation and error handling, event-driven architecture, and font face lifecycle management. Environment-agnostic and easy to integrate with any web application. (resolver is an experimental feature, use with caution and report any issues)

Installation

npm install advanced-font-manager
yarn add advanced-font-manager
pnpm i advanced-font-manager

Configuration

Advanced Font Manager provides a simple API for loading fonts from URLs, files, or buffer data. It also includes built-in validation and error handling, event-driven architecture, and font face lifecycle management. Environment-agnostic and easy to integrate with any web application.

                    
                        import { FontLoader } from 'advanced-font-manager';

                        const loader = new FontLoader(
                            options: {
                                useResolvers?: boolean; // Should we use the resolvers to load the fonts
                                disableWarnings?: boolean; // Should we disable warnings
                                useCache?: boolean; // Should we use the cache
                                debugLevel?: 'info' | 'warn' | 'error' | 'debug' // Minimum level of logs to display
                            },
                            rules : [
                            {
                                type: 'metrics' | 'glyph' | 'font' | 'names' | 'tables'
                                rule: {
                                    check: (font: op.Font) => boolean;
                                    fix?: (font: op.Font) => op.Font | null;
                                    severity: "error" | "warning";
                                }
                                message?: string;
                                },
                            ]
                        );

Loading Methods

There are three differebt methods to load fonts using the Advanced Font Manager.

I'm planning to add font providers later


                        import { FontLoader } from 'advanced-font-manager';

                        const loader = new FontLoader({ debugLevel: 'info' });
                        await loader.loadFromUrl({
                            fonts: [{
                                url: 'https://fonts.com/roboto.ttf', // Font URL
                                family: 'Roboto' // Font family name
                            }],
                            params: {
                                timeout: 5000 // Timeout in milliseconds to reject the promise
                            }
                        });

Using custom name :


                        import { FontLoader } from 'advanced-font-manager';

                        const loader = new FontLoader({ debugLevel: 'info' });
                        await loader.loadFromFile({
                            fonts: [{
                                url: File, // File object
                                family: 'Roboto' // Font family name
                            }],
                            params: {
                                timeout: 5000 // Timeout in milliseconds to reject the promise
                            }
                        });

Using file input name :


                        import { FontLoader, sanitizeFamilyName } from 'advanced-font-manager';

                        const loader = new FontLoader({ debugLevel: 'info' });
                        const fontName = sanitizeFamilyName(file.name.split('.')[0])
                        await loader.loadFromFile({
                            fonts: [{
                                url: File, // File object
                                family: 'Roboto' // Font family name
                            }],
                            params: {
                                timeout: 5000 // Timeout in milliseconds to reject the promise
                            }
                        });
                        
                            
                            import { FontLoader } from 'advanced-font-manager';

                            const loader = new FontLoader({ debugLevel: 'info' });
                            await loader.loadFromUrl({
                                fonts: [{
                                    buffer: fontBuffer, // ArrayBuffer
                                    family: 'Roboto' // Font family name
                                }],
                                params: {
                                    timeout: 5000 // Timeout in milliseconds to reject the promise
                                }
                            });

Events (comming soon)

Advanced Font Manager provides a simple API for loading fonts from URLs, files, or buffer data. It also includes built-in validation and error handling, event-driven architecture, and font face lifecycle management. Environment-agnostic and easy to integrate with any web application.

                    
                        import { FontLoader } from 'advanced-font-manager';

                        const loader = new FontLoader({ debugLevel: 'info' });
                        loader.on('fontLoadComplete', (event) => {
                            console.log('Font loaded', event);
                        });
                        loader.on('fontLoadError', (event) => {
                            console.error('Font loading error', event);
                        });

Error Handling

Advanced Font Manager provides a simple API for loading fonts from URLs, files, or buffer data. It also includes built-in validation and error handling, event-driven architecture, and font face lifecycle management. Environment-agnostic and easy to integrate with any web application.

                    
                        import { FontLoader } from 'advanced-font-manager';

                        const loader = new FontLoader({ debugLevel: 'info' });

                        loader.loadFromBuffer(
                            [{ name: fontName, font: arrayBuffer, options: {} }],
                            { timeOut: 2000 }
                        );

                        if(isErrored(fontName)) {
                            const error = loader.getFontFaceErrors(fontName)
                        }

Error examples

                    
                        {
                            type:
                            | 'timeout'
                            | 'network'
                            | 'format'
                            | 'security'
                            | 'validation'
                            | 'sanitizer'
                            | 'DOMException'
                            | 'unknown';
                          message: string;
                          details?: string[];
                          originalError?: any;
                        }

Error types

  • timeout: Font loading timed out
  • DOMExeption: DOM Exception while loading font, illegal string
  • network: Network error while loading font
  • format: Ivalid font format or corrupted font
  • security: Security error while loading font
  • validation: Font failed validation check
  • sanitizer: The font file appears to be corrupted or invalid
  • unknown: An unknown error occurred