ui-essentials/projects/ui-font-manager

UI Font Manager

A comprehensive Angular library for dynamic font management with runtime theme switching, Google Fonts integration, and extensible custom font support.

Features

• 🎨 Runtime Font Themes: Switch font themes dynamically without rebuilds
• 📦 Google Fonts Presets: 75+ popular Google Fonts with URLs ready to use
• 🔧 Custom Font Support: Add Typekit, self-hosted, or any external fonts
• ⚡ Performance Optimized: Lazy loading, preloading, and caching strategies
• 🎯 Theme Management: Create, save, and apply font theme combinations
• 📱 CSS Variables Integration: Seamless integration with your design system

Installation

npm install ui-font-manager

Quick Start

1. Basic Usage

import { UiFontManagerService, FontThemeService } from 'ui-font-manager';

@Component({...})
export class MyComponent {
  constructor(
    private fontManager: UiFontManagerService,
    private themeService: FontThemeService
  ) {}

  // Load a Google Font
  loadFont() {
    this.fontManager.loadFont('Inter').subscribe(success => {
      console.log('Font loaded:', success);
    });
  }

  // Apply a predefined theme
  applyTheme() {
    this.themeService.applyTheme('Modern Clean').subscribe();
  }
}

2. CSS Variables Integration

Your CSS automatically uses the new fonts:

.my-component {
  font-family: var(--font-family-sans); // Updates dynamically
}

h1 {
  font-family: var(--font-family-display);
}

code {
  font-family: var(--font-family-mono);
}

Google Fonts Presets

Access 75+ popular Google Fonts instantly:

// Get all available Google Fonts
const fonts = this.fontManager.getGoogleFontsPresets();

// Load specific fonts
this.fontManager.loadFonts(['Inter', 'Playfair Display', 'JetBrains Mono']);

// Use predefined combinations
const combinations = this.fontManager.getFontCombinations();
// 'Modern Clean', 'Classic Editorial', 'Friendly Modern', 'Professional'

Available Google Fonts by Category

Sans-serif (35 fonts): Inter, Roboto, Open Sans, Poppins, Lato, Montserrat, Nunito, Source Sans Pro, Raleway, Ubuntu, Work Sans, Rubik, Kanit, DM Sans, Mulish, Hind, Quicksand, Karla, Manrope, Comfortaa, Outfit, Lexend, Plus Jakarta Sans, Space Grotesk, Figtree, Barlow, Epilogue, Sora, Red Hat Display, Satoshi, Heebo, Exo 2, Commissioner, Archivo, Public Sans

Serif (20 fonts): Playfair Display, Merriweather, Lora, EB Garamond, Crimson Text, Source Serif Pro, Noto Serif, Vollkorn, Libre Baskerville, Arvo, Zilla Slab, Cormorant Garamond, PT Serif, Alegreya, Spectral, Old Standard TT, Cardo, Gentium Plus, Neuton, Bitter

Monospace (10 fonts): JetBrains Mono, Fira Code, Source Code Pro, Roboto Mono, IBM Plex Mono, Space Mono, Inconsolata, PT Mono, Fira Mono, Ubuntu Mono

Display (10 fonts): Oswald, Bebas Neue, Anton, Righteous, Fredoka One, Archivo Black, Cabin, Prompt, Fjalla One, Patua One

Handwriting (10 fonts): Dancing Script, Great Vibes, Pacifico, Kaushan Script, Satisfy, Caveat, Amatic SC, Indie Flower, Shadows Into Light, Permanent Marker

Custom Font Support

Add External Fonts

import { fontPresetManager } from 'ui-font-manager';

// Add Typekit fonts
fontPresetManager.addTypekitFont('abc123', [
  { name: 'My Custom Font', family: 'MyFont', weights: [400, 700] }
]);

// Add custom CDN fonts
fontPresetManager.addExternalFont('Custom Sans', {
  family: 'CustomSans',
  url: 'https://mycdn.com/fonts/custom.css',
  weights: [300, 400, 600],
  category: 'sans-serif'
});

// Add self-hosted fonts
fontPresetManager.addSelfHostedFont('My Font', {
  family: 'MyFont',
  basePath: '/assets/fonts/myfont',
  formats: ['woff2', 'woff'],
  weights: [400, 700],
  category: 'serif'
});

Theme Management

Create Custom Themes

// Create theme from font combination
const theme = this.themeService.createThemeFromCombination(
  'My Theme',
  'Modern Clean',
  'Clean and modern design'
);

// Create fully custom theme
const customTheme = this.themeService.createCustomTheme('Custom Theme', {
  sans: 'Inter',
  serif: 'Playfair Display',
  mono: 'JetBrains Mono',
  display: 'Oswald'
});

// Apply the theme
this.themeService.applyTheme('My Theme').subscribe();

Export/Import Themes

// Export theme configuration
const config = this.themeService.exportTheme('My Theme');

// Import theme from JSON
const theme = this.themeService.importTheme(jsonString);

Performance Features

Font Loading Strategies

// Configure font manager
this.fontManager.configure({
  preloadFonts: true,
  fallbackTimeout: 3000,
  cacheEnabled: true
});

// Preload fonts for performance
this.fontManager.preloadFonts(['Inter', 'Roboto']);

// Load with specific options
this.fontManager.loadFont('Inter', {
  display: 'swap',
  weights: [400, 600],
  subsets: ['latin']
});

Integration with Design Systems

Works seamlessly with existing CSS custom properties:

// In your existing design system
:root {
  --font-family-sans: 'Inter', system-ui, sans-serif;
  --font-family-serif: 'Playfair Display', Georgia, serif;
  --font-family-mono: 'JetBrains Mono', Consolas, monospace;
  --font-family-display: 'Inter', system-ui, sans-serif;
}

// Font manager updates these variables at runtime

API Reference

UiFontManagerService

• loadFont(name, options?): Load single font
• loadFonts(names, options?): Load multiple fonts
• applyTheme(theme): Apply font theme
• getGoogleFontsPresets(): Get Google Fonts collection
• getFontCombinations(): Get predefined combinations
• addCustomFont(name, definition): Add custom font

FontThemeService

• applyTheme(name): Apply theme by name
• getThemes(): Get all themes
• createCustomTheme(): Create custom theme
• exportTheme() / importTheme(): Export/import themes

FontPresetManager

• addCustomFont(): Add single custom font
• addTypekitFont(): Add Adobe Typekit fonts
• addSelfHostedFont(): Add self-hosted fonts
• getFontsByCategory(): Filter fonts by category

License

MIT