# 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

```bash
npm install ui-font-manager
```

## Quick Start

### 1. Basic Usage

```typescript
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:

```scss
.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:

```typescript
// 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

```typescript
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

```typescript
// 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

```typescript
// 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

```typescript
// 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:

```scss
// 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