Stylizer - Config-Driven Font Picker

Features

🌐

Framework Agnostic

Preact bundled, zero dependencies - works everywhere

🎯

Dual Font Support

Separate controls for primary and secondary fonts

🎨

Curated Mode

38 handpicked fonts, zero API key needed

🔍

Browse All Mode

Access 1500+ Google Fonts with API key

⭐

Favorites System

Save your favorite fonts to localStorage

🎭

Font Variants

Select font weights (100-900) and italic styles

🛠️

DevTools Sidebar

Slide-in panel for easy font selection

📦

Tiny Bundle

Lightweight with minimal dependencies

Quick Start

Works the same way in React, Vue, Svelte, Astro - Preact is bundled, zero dependencies needed.

<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --font-primary-family: "Changa One", sans-serif;
      --font-primary-weight: 400;
      --font-primary-style: normal;
      --font-secondary-family: "Nova Square", sans-serif;
      --font-secondary-weight: 400;
      --font-secondary-style: normal;
    }
    
    body {
      font-family: var(--font-primary-family);
      font-weight: var(--font-primary-weight);
      font-style: var(--font-primary-style);
    }
    
    h1, h2, h3 {
      font-family: var(--font-secondary-family);
      font-weight: var(--font-secondary-weight);
      font-style: var(--font-secondary-style);
    }
  </style>
</head>
<body>
  <h1>Hello Stylizer!</h1>
  
  <script type="module">
    import { Stylizer } from 'jsg-stylizer';
    
    // Configure Stylizer
    Stylizer.configure({
      fonts: {
        primary: 'Changa One',
        secondary: 'Nova Square'
      },
      cssVariables: {
        primary: {
          family: '--font-primary-family',
          weight: '--font-primary-weight',
          style: '--font-primary-style'
        },
        secondary: {
          family: '--font-secondary-family',
          weight: '--font-secondary-weight',
          style: '--font-secondary-style'
        }
      }
    });
    
    // Listen to font changes
    window.addEventListener('stylizer-font-changed', (e) => {
      console.log('Font changed:', e.detail);
    });
  </script>
</body>
</html>

Installation

npm

npm install jsg-stylizer

Git Clone (Development)

git clone https://github.com/crimsonsunset/jsg-stylizer.git
cd jsg-stylizer
npm install

🎨 Stylizer

Config-Driven Font Picker

Primary Font: Changa One | 400

Secondary Font: Nova Square | 400